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Conocer Angular 


Introducción 





Angular es una plataforma que permite desarro- 

llar aplicaciones web en la sección cliente utilizan- 
do HTML y JavaScript para que el cliente asuma 
la mayor parte de la lógica y descargue al servidor 
con la finalidad de que las aplicaciones ejecutadas 
a través de Internet sean más rápidas. El hecho de 
estar mantenido por Google, así como una serie 
de innumerables razones técnicas, ha favorecido 
su rápida adopción por parte de la comunidad de 
desarrolladores. 


Permite la creación de aplicaciones web de una sola 
página (SPA: single-page application) realizando la 
carga de datos de forma asíncrona. 





Además de mejorar el rendimiento de las aplicaciones 

web, su utilización en dispositivos móviles está optimizada ya 
que, en ellos, los ciclos de CPU y memoria son críticos para su 
óptimo funcionamiento. Ello permite el desarrollo de aplica- 
ciones móviles híbridas con Ionic 2. 





Gracias al uso de componentes, se puede encapsular mejor la funcionalidad facili- 
tando el mantenimiento de las aplicaciones. 


Parecería ser la continuación de AngularJS, pero, en realidad, más que una nue- 
va versión es realmente un framework o plataforma diferente. El hecho de utilizar 
componentes como concepto único en lugar de controladores, directivas y servicios 
de forma específica, como sucedía en AngularJS, simplifica mucho las cosas. 


Angular está orientado a objetos, trabaja con clases y favorece el uso del patrón 
MVC (Modelo-Vista-Controlador). 


Permite el uso de TypeScript (lenguaje desarrollado por Microsoft) con las ventajas 
que supone poder disponer de un tipado estático y objetos basados en clases. Todo 
ello, gracias a la especificación ECMAScript 6, que es la base sobre la que se apoya 
TypeScript. Gracias a un compilador (transpilador) de TypeScript, el código es- 
crito en este lenguaje se traducirá a JavaScript original. 
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En la web de Angular podemos observar el diagrama de ar- 


quitectura que muestra cómo se relacionan los elementos TypeScript 
principales de una app los cuales son los siguientes: 


f Module | Module 


¡Component Senice 
3 i ) l 
} Il ; Template 
r e í r 


Directive 


14 


Event 
Binding 





Modules. 
Components. 
Templates. 

Metadata. 

Data binding. 
Directives. 

Services. 

Dependency injection. 


Una visión más sencilla de la arquitectura MVC nos permitiría enumerar los si- 
guientes elementos: 
dar 

e Vistas: Componentes. 


e Capa de control: Router. 


e Backend: Servicios. TEE RAURI 





A lo largo del libro, analizaremos cada uno de estos elementos y veremos, entre 
otras muchas cosas, que los componentes son la suma de los templates, las clases y 
los metadatos. 


Veremos también que la inyección de dependencias favorece el testing y reduce el 
acoplamiento entre clases. Con Lazy SPA no es necesario tener en memoria todos 
los elementos que componen una aplicación, de forma que podemos cargarla por 
partes a medida que los necesitemos. 


Podemos ejecutar Angular en el servidor gracias a Angular Universal, con lo 
que podremos reducir el tiempo de espera que se produce en la primera visita ya 
que, en lugar de cargar todo lo necesario para ejecutar la aplicación, se pueden en- 
viar vistas “prefabricadas” directamente al cliente. 
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%1 Introducción a las 
aplicaciones SPA 





Angular es un framework principalmente enfocado a la 

creación de aplicaciones web de tipo single-page appli- 
cation (SPA). En este capítulo haremos un breve repaso 
a los distintos tipos de aplicación web y, a continua- 


ción, analizaremos con más detalle en qué consisten 
las aplicaciones single-page application (SPA). 


Una aplicación web la podemos definir como toda 
aquella aplicación proporcionada por un servidor web 
y utilizada por los usuarios a través de un cliente web 
(browsers o navegadores). En otras palabras, son aque- 
llas aplicaciones codificadas en un lenguaje soportado 
por los navegadores web para que puedan ejecutarse desde allí. 





Toda aplicación web tiene una arquitectura básica de 
tipo cliente-servidor. Esto es así porque toda aplicación 
web sigue un modelo de aplicación distribuida en la 
que, por una parte, está el servidor que provee de re- 
cursos y servicios y, por la otra, está el cliente que los 
demanda. A partir de aquí, segün lo estática o dinámi- 
ca que sea cada parte, tenemos distintos tipos de apli- 
caciones web: 





e Cliente y servidor estáticos: no hay ningún tipo de dinamismo y el servidor 
siempre devuelve los mismos recursos sin ningün tipo de cambio. Más que 
de aplicaciones web, aquí hablaríamos de páginas web. 

e Cliente estático y servidor dinámico: el servidor devuelve recursos 
dinámicos, por ejemplo, páginas web con el resultado de consultas a base de 
datos, etc. 

e  Cliente/servidor dinámicos: el cliente es dinámico porque las páginas 
web recibidas del servidor incluyen JavaScript, que se ejecuta en el propio 
navegador dando todo tipo de funcionalidades diversas. 


Hoy en día, la mayoría de aplicaciones web disponen de una parte cliente dinámica 
con el objetivo de disminuir la comunicación con el servidor y mejorar la fluidez y 
experiencia del usuario. Sin embargo, segün hasta donde se lleve esta técnica, pode- 
mos hablar de grandes patrones de diseño: 
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e Multi page web applications (MPA). 

e Single-page application (SPA). 
Las aplicaciones multi page web applications (MPA) corresponderían al tipo tradi- 
cional de aplicación web. Su característica principal es que la mayoría de acciones 
de usuario se transforman en solicitudes al servidor de páginas completas (incluyen- 
do diseño, css [hojas de estilo], JavaScript y contenido). 


CLIENTE (navegador) SERVIDOR 


Petición Interf. 1 


Interface 1 





Interface 2 





Este tipo de disefio es perfectamente funcional para cualquier tipo de aplicación; 
sin embargo, para aplicaciones complejas pueden existir problemas de lentitud en 
la navegación. Por ejemplo, una aplicación con una rica interfaz de usuario segura- 
mente tendrá páginas muy complejas y, en este contexto, generar estas páginas en 
el servidor, transferirlas al cliente y visualizarlas en el navegador, puede requerir un 
tiempo considerable que afecte negativamente a la experiencia de usuario. 


Sin embargo, para mejorar este posible problema de fluidez, las aplicaciones MPA 
suelen hacer uso de AJAX. AJAX no es una tecnología en sí misma, sino que es un 
conjunto de tecnologías independientes (JavaScript, XML, etc.) usadas con el fin de 
permitir refrescar de forma asíncrona partes de una página sin necesidad de recar- 
garla toda de nuevo. 


Por otra parte, el patrón de diseño single-page application (SPA) es una evolución 
del patrón de diseño MPA + AJAX, pero llevando al extremo el uso de AJAX. Hasta el 
punto de que en el cliente se carga una ünica página que se modifica desde el propio 
cliente (navegador) segün las acciones de usuario. Por tanto, toda la navegación por 
las distintas pantallas o interfaces de la aplicación se realizará sin salir de esa única 
página. 


Una de las principales ventajas de las aplicaciones SPA respecto las MPA es la mejora 


de experiencia de usuario debido a la reducción en el tiempo de respuesta ante las 
acciones del usuario. Esto se consigue gracias a que: 
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e Yano se crean páginas completas por cada acción del usuario. 
e Solo se intercambia la información necesaria con el servidor. 


En las aplicaciones SPA, la responsabilidad del aspecto de la aplicación recae princi- 
palmente en la parte cliente, mientras que el servidor tiene la función de ofrecer al 
cliente una API de servicios para dar acceso a la base de datos de la cual se alimenta 
la aplicación. Los datos intercambiados entre cliente y servidor suelen estar en for- 
mato JSON, que es un formato más óptimo que el tradicional XML. 


En las aplicaciones Web, la programación del lado cliente se realiza con html5 
+ JavaScript. Sin embargo, no suele usarse estos lenguajes de forma directa, sino 
que suele hacerse mediante librerías (jQuery) y/o frameworks (Angular, Backbone. 
js, Ember.js, etc.). Las librerías sirven para facilitar el uso de JavaScript aportando 
todo tipo de herramientas, pero los frameworks, aparte de aportar herramientas, 
aportan patrones de disefio para el desarrollo de aplicaciones complejas. Angular 
es uno de estos framework, quizás uno de los más usados y, como veremos a lo lar- 
go del libro, aporta todo lo necesario para crear y mantener aplicaciones single-pa- 
ge application (SPA). 


CLIENTE (navegador) SERVIDOR 


Petición Interf. 1 


Interface 1 


Petición Interf. 2 


Interface 2 
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tE Breve historia 
de Angular 


El concepto de las single-page applications (SPA) empe- 
zó a debatirse en 2003, pero no fue hasta 2005 que se 
utilizó el termino por primera vez. Como vemos, se tra- 
ta de un tipo de aplicación relativamente nueva, sin em- 
bargo, su uso se está extendiendo rápidamente y a día 
de hoy ya detectamos su presencia en aplicaciones tan 
conocidas como Gmail, Outlook, Facebook y Twitter. 


El auge de este tipo de aplicaciones se debe en parte 
a las ventajas que aportan respecto a otras soluciones, 
pero, sobre todo, a la gran inversión que están hacien- 
do grandes empresas tecnológicas para desarrollar fra- 
meworks que permitan su desarrollo. Este es el caso de 
Google con el framework Angular, o Facebook con el 
framework React.js. 


AngularJS fue desarrollado en 2009 por Miško Hevery 
y Adams Abrons. Originalmente era el software detrás 
de un servicio de almacenamiento online de archivos 


Importante 





JSON, pero, poco tiempo después, se abandonó el proyecto y se liberó AngularJS como 
una biblioteca de código abierto. Adams Abrons dejó el proyecto, pero Miško Hevery, 
como empleado de Google, continuó el desarrollo y mantenimiento del framework. 


Desde entonces se han ido lanzando muchas versiones de AngularJS, pero, sobre to- 
das ellas, cabe destacar la salida de la versión 2.0 por los siguientes motivos: 


e Se rediseñó por completo todo el framework (nueva arquitectura 


basada en componentes, etc.). 


e Se introdujo el uso de TypeScript de Microsoft (superconjunto de 


JavaScript) como lenguaje de programación. 


e Se cambió el nombre del framework. Pasó de llamarse AngularJS a 


Angular. 


e Los desarrolladores anunciaron que darían soporte y mantenimiento tanto 
para AngularJS (versiones 1.X.Y) como para Angular (versiones superiores), 
pero que una y otra seguirían ciclos de vida independientes. Actualmente, 
AngularJS se encuentra en la versión 1.6.4, mientras que Angular se 


halla en la versión 4.0. 
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En un primer momento, la salida de Angular tuvo muchas críticas por parte de los 
desarrolladores que usaban AngularJS, ya que veían como la actualización de sus de- 
sarrollos al nuevo framework requería un trabajo muy laborioso de migración. Por 
otra parte, también veían que su experiencia y conocimiento no les servía de mucho 
con los nuevos conceptos de Angular. 


G mim pen 

dependencies": [ 
"Rorgularíarimatiens- 77a.2.4^, 
"Rargular/cemmont: "54.2.4", 


iaegularicompller": 74.2.4", 
"Rasgularícere^: 74.2.47, N [2 
"gasgular!fermws: "4.2.47 
"Roegulae/htty": 7*4.2.47, ü U L 
mgorguilar/platforw-teovser": 7742.47, 
"jorgular/platform-troser-dyessic^: 774.2.4*, 
"ieeularireuter*: “aa, 7.a", 

Worgulari compt lec-c1i^: cada, À N( jl J| ARJS 
TPorgular/ Lenprage-service”: "94,24, q 

"types jaemina"- “2.0.5, 3 
"types jawnirewi2^: *-2.0,2* by Google 
"pes /node" 6.0.6", 
"codelyime": "3.10, 


w wma son (omm Pipins 


"devüepordencios": [ 
TROrgular/cltt: 71.4.57, 





Sin embargo, a medida que los desarrolladores apreciaron las ventajas de la nueva 
versión, la situación mejoró. También ayudaron las distintas iniciativas de Google, 
como anunciar que seguirían dando soporte y mantenimiento a las antiguas versio- 
nes del framework (AngularJS) o la de documentar un protocolo de migración de los 
desarrollos al nuevo Angular https://angular.io/guide/upgrade) 


A continuación, sin entrar en demasiado detalle, podremos analizar algunas de las 
diferencias entre AngularJS y Angular mediante un sencillo ejemplo. El ejemplo 
consiste en una aplicación web que muestra un “Hola mundo”. Primero lo veremos 
implementado en AngularJS y luego en Angular. 


Ejemplo AngularJS 


e index.html: 


<!DOCTYPE html» 





«html ng-app="testAngularJs”> 


<head> 





<link rel="stylesheet” type="text/css” href="bootstrap.min.css” /> 
<script type-"text/javascript" src-"angular.min.js"»«/script» 
<script type-"text/javascript" src-"app.js"»«/script» 

«/head» 

«body» 
<entity-directivel></entity-directivel> 

</body> 


</html> 
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e  app.js: En este archivo tenemos definido el módulo y la directiva de tipo 
“entidad” a los que se hacía referencia en el index.html. 


(function () { 
var app = angular.module (*testAngularJS', []1); 
app.directive('entityDirectivel', function() { 

return ( 





restrict: “E”, 

template: "«hl»[([(title))«/hl1»', 
scope: {}; 

link: function(scope, element) ( 


scope.title='AngularJS: Hola mundo!!'; 


Ejemplo Angular. Aparte de los archivos indicados a continuación, el proyecto 
incluye muchos otros archivos relacionados con la carga de bibliotecas necesarias y 
el uso de TypeScript. En la imagen anterior puede ver algunas de estas dependencias 
referenciadas en el archivo package.json de un proyecto Angular. 


e index.html: 


<body> 
<app-root>Loading...</app-root> 


</body> 


e  app.component.ts: Definición del componente usado en el index.html. 


import { Component ) from '“fangular/core'; 


Component (( 
selector: "'app-root', 
template: "«hl1»[([(title))«/hl1»', 
styleUrls: ['./app.component.css'] 
)) 
export class AppComponent { 


title = 'Angular: Hola mundo!!!!'; 
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vz Instalación 





Para trabajar con Angular necesitamos realizar | Importante | 
; : : Importante 

diversas instalaciones, algumas de las cuales son 

imprescindibles, como por ejemplo Node.js, y otras 
son opcionales, aunque recomendadas, ya que nos 
facilitarán enormemente el trabajo. Por ejemplo, el 
usuario puede utilizar el editor que más le guste, pero 
recomendamos emplear algunos editores que aportan 
un sinfín de utilidades a la hora de comprobar la 
sintaxis de nuestras sentencias o de aportar bloques de 
código a modo de plantilla. 





]. En primer lugar instalaremos Node js. 
Para ello podemos descargarlo desde la 
siguiente página: 


https://nodejs.org/es/download/ 


En esta página, seleccionaremos la 
opción que más nos interese según 
nuestro SO y el número de bits (32 o 
64). En nuestro caso, seleccionamos la 
opción Windows Installer (.msi) 
64-bit y descargamos el instalador en 
una carpeta desde la que realizaremos 
posteriormente la instalación. 








Una vez descargado, ejecutaremos el instalador y podemos aceptar todos los 
valores que nos propone por defecto hasta que lleguemos a la pantalla final 
y pulsemos Finish. 


2. Seguidamente, instalaremos TypeScript. Para ~ 
ello, podemos acudir al siguiente link: TypeScript 
JavaScript that scales. 
https://www.typescriptlang.or S dee Mee T 
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Al pulsar sobre el botón download aparece una pantalla en la que se mues- 
tra la sentencia a ejecutar para instalar TypeScript 


npm install -g typescript 


A continuación, copiaremos dicha sentencia y abriremos una ventana de 
CMD (Ejecutar->CMD) para pegarla y ejecutarla. 


3. A continuación, instalaremos Angular-Cli. 
Para ello, acudiremos a la siguiente página: 


https://cli.angular.io/ 


En dicha página, ya podemos ver diversas instrucciones entre las que halla- 
mos la siguiente: 





npm install -g fangular/cli 


De nuevo, abrimos una ventana CMD (Ejecutar->CMD) y ejecutaremos la 
sentencia anterior, 


Para obtener más información sobre los detalles de la instalación y prerre- 
quisitos, puede consultar la siguiente página: 
https://github.com/angular/angular-cli 
e = 

4. Podemos realizar nuestras pruebas en muchos 
navegadores, pero nosotros realizaremos 
todas las explicaciones basándonos en imd 
Google Chrome y en sus herramientas para isi 
desarrolladores. Por tanto, sugerimos que 
utilice este navegador, el cual puede descargar de la siguiente página: 


Un navegador web rápido y gratuito 





https://www.google.es/chrome/browser/desktop/index.html 


5. Por ültimo, tal y como hemos indicado en la introducción, necesitará un 
editor que le ayude a desarrollar sus componentes con Angular y puede 
utilizar alguno de los siguientes: 





Visual Studio Code  |https://code.visualstudio.com/download 
Sublime Text https://www.sublimetext.com/3 
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Nosotros utilizaremos Atom en nuestras explicaciones y, en este caso, una 
vez instalado Atom, recomendamos añadir una serie de funcionalidades 
que nos facilitarán el desarrollo con Angular. Para añadir funcionalidades, 
accederemos a Help->Welcome Guide y, seguidamente, accederemos a 
Install a Package->Open Installer. Cuando aparezca la pantalla de Ins- 
tall Packages, teclearemos el nombre del paquete que queramos añadir y, 
una vez que nos muestre el package deseado, pulsaremos sobre Install. 









Get to know Atom! 


D ns a Pace 





] + Install Packages 


CO aag aa A Va aama and wu ad a La pu er 


EH -- 


One ot San best things abc A 
packages adds mom fansa | angular 2 yy p stops 
tice veft your needs. Levin 




















a Cumanoe the Ang 


O Hack or the init Scri 


angular-2-typeScript-snippets 152 — 4 43,807 
Angular 2 TypeSctipt Snippets for Atom. 


— 
E Laan Keyboard Shortass g $ Gregonhet EL 


o Add a Spp 


Algunas de las funcionalidades recomendadas se hallan en los siguientes 
packages: 


Angular-2-TypeScript-Snippets, 
Angular2-Snippets, 
Atom-Bootstrap 3, 
Atom-TypeScript, 

file-icons, 

Linter, 

Linter-UI-Default, 
PlatformIO-IDE-Terminal. 
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UU TypeScript. Introducción 
(variables, clases, 
transpilación, etc.) 


TypeScript es un lenguaje de pro- 
programa.ts gramación orientado a objetos fuerte- 
mente tipado que se traduce a JavaS- 
y cript añadiéndole características que 
no posee. La operación de traducir 


TSC TypeScript a JavaScript se conoce como 
534 transpilación. 


Gracias al uso de TypeScript, es posible 
localizar errores de sintaxis antes in- 
A cluso de su ejecución. De ahí que haya 


programa.js ganado mucha aceptación entre los de- 
sarrolladores del mundo web. 


Importante 





Podríamos dedicar un libro completo a TypeScript, pero, en este ejercicio, simple- 
mente ofreceremos una pincelada sobre el lenguaje y elaboraremos el clásico progra- 
ma Hola Mundo para que podamos ver cómo se compila y ejecuta. 


Los programas escritos con TypeScript se suelen escribir en ficheros con la extensión ts. 


Una vez escritos, dichos programas se transpilan (compilan) o, lo que es igual, se 
traducen a JavaScript para que puedan ejecutarse posteriormente. Cualquier instruc- 
ción escrita en JavaScript “puro” se copia igual (sin traducción) en el fichero resul- 
tante de la transpilación. 


Para compilar usaremos el comando TSC y para ejecutar emplearemos el coman- 
do node, como veremos más adelante y el cual ya hemos instalado en capítulos 
anteriores. 


La sintaxis que hallaremos en TypeScript está compuesta por módulos, funciones, 
variables, sentencias, expresiones y comentarios. 


Respecto de las funciones, TypeScript permite definir funciones con nombre, anóni- 
mas, tipo Lambda o de flecha, además de permitir la sobrecarga de funciones utili- 
zando diferentes parámetros y/o tipos en sus llamadas. 


Asimismo, disponemos de un gran surtido de operadores, sentencias condi- 
cionales, loops, funciones y métodos para numéricos y strings. 
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También es posible definir interfaces y clases, incluyendo en las mismas campos, 
constructores y funciones utilizando la herencia y encapsulación propias de POO. 


Tipo of dor e! wikiietonndictiex) for imrinhle tn 
) operador lores i 

DES 

meme oem mme 


test > ni 
Devuelve tipo de datos del eoe 


1f (expresión) 
i 


function nombre funcion():tipo retorno 


"E sentencias { 
Í f {sentencias 


return valor; 


LE (expresión) 
/ ==uteuoclas 
£ (expresión 


sentencias 


sentencias 





Para acabar con la breve mención al lenguaje, es importante resaltar que el concepto 
de namespace permite organizar mejor el código y sustituye a los antiguos Inter- 
nal Modules. 


A continuación, vamos a crear un programa con TypeScript que simplemente mues- 
tre el texto Hola Mundo: 


1. Para ello, nos ubicaremos en nuestro directorio de ejercicios (Ej100_ 
angular) y crearemos el directorio 005_HolaMundo_TS. 


2. Seguidamente,  abriremos nuestro editor 
favorito y, dentro del directorio recién creado, {Foe em 
crearemos el fichero 005_HMTS.ts con el [Pt 
siguiente contenido: ————— 
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var texto:string-"Hola Mundo” 
console.log(texto) 
3. Una vez creado y guardado el fichero, accederemos a la ventana de CMD y 


nos ubicaremos en nuestro nuevo directorio (005_HolaMundo_TS) para 
teclear lo siguiente: 


Ei 005_HMTSas 


v E 005 HolaMundo. TS var texto:string-"Hola Mundo" 
005 HMTSts console.log(texto) 


:XEj186 angulares HolaMundo T$»tsc #05 HNTS.t« 


:XEji1ée aegular'Wés HolaMundo T$» 





tsc D05 HMTS. Ets 


4. Observaremos que, si no se ha producido ningún error, la compilación se 
realiza de forma silenciosa devolviendo el control al prompt de la ventana 
de CMD. 


5. En este punto, procederemos a la ejecución de nuestro programa tecleando 
lo siguiente: 


node 005 HMTS 


6. Observaremos como, efectivamente, se muestra el texto Hola Mundo en 
pantalla. 


>: E5100_angular1005_HolaMundo_TS>node 005 HMTS 
la Mundo 


:XEJ1ee angularVees HolaMundo TS» 
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Definición de elementos 
en una aplicación 





En el capítulo de introducción, enumeramos los elementos que había que tener en 
cuenta en Angular. A continuación, los definiremos brevemente. 


Módulo Conjunto de códigos dedicados a resolver un objetivo que gene- 
ralmente exporta una clase. Cada aplicación posee al menos una 
clase de módulo que denominamos “módulo raíz” y que, por 
defecto, posee el nombre de AppModule. En el mismo podemos 
apreciar una clase con un decorador (SNgModule) y una serie de 
propiedades entre las que destacamos las siguientes: 


Declarations: define las vistas que pertenecen a este 
módulo. 

Exports: declaraciones que han ser visibles para componentes 
de otros módulos. 

Imports: clases que otros módulos exportan para poderlas 
utilizar en el módulo actual. 

Providers: servicios usados de forma global y accesibles 
desde cualquier parte de la aplicación. 


Bootstrap: la vista principal o componente raíz, que aloja 
el resto de vistas de la aplicación. Propiedad establecida 
solo por el módulo raíz. 


Un módulo puede agrupar diversos componentes relacionados en- 
tre sí. 


Módulo 2 
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Componente | Elemento que controla una zona de espacio de la pantalla que re- 
presenta la “vista”. Define las propiedades y métodos que usa el 
propio template y contiene la lógica y la funcionalidad que utili- 
za la vista. Pueden tener atributos tanto de entrada (decorador (9 
Input) como de salida (decorador Output). También podemos 
definir al componente como: 


Componente - template + metadatos + clase 


Template Define la vista de un Componente mediante un fragmento de 
HTML. 


Metadatos Permiten decorar una clase y configurar así su comportamiento. 
Extiende una función mediante otra sin tocar la original. 


Data binding | Permite intercambiar datos entre el template y la clase del com- 
ponente que soporta la lógica del mismo. Existen 4 tipos de Data 
binding (que analizaremos en profundidad más adelante) y que 
son: 


Interpolación: muestra el valor de una propiedad en el 
lugar donde se incluya (( propiedad }}. 

Property binding: traspaso del objeto del componente 
padre al componente hijo ([objHijo]="objPadre”). 
Event binding: permite invocar un método del componente 
pasándole un argumento al producirse un evento (p. ej., 
(click)-"hazAlgo(obj)"). 

Two-way binding: binding bidireccional que permite 
combinar event y Property binding (p. ej., input 
[ingModel)]- “obj”). 


Directiva Permite afiadir comportamiento dinámico a HTML mediante 
una etiqueta o selector. Existen directivas estructurales (*ngFor o 
*nglf) o de atributos que modifican el aspecto o comportamiento 
de un elemento DOM (NgSwitch, NgStyle o NgClass). 





Servicio Son clases que permiten realizar acciones concretas que ponen a 
disposición de cualquier componente. Por ejemplo, permiten ob- 
tener datos, resolver lógicas especiales o realizar peticiones a un 
servidor. 

Permite suministrar funcionalidades, servicios, etc., aun componente 
sin que sea el propio componente el encargado de crearlos. Utiliza 
el decorador (Injectable(). Generalmente proporciona servicios y 
facilita los test y la modularidad del código. 


Dependency 
injection 
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Al crear una aplicación, por defecto se crea el mó- 
dulo app.module.ts, como veremos en ejercicios 
posteriores. 


En el mismo, podemos apreciar diferentes partes co- 
rrespondientes a: 


e Los "imports": 
e BrowserModule: usado para renderizar 
la aplicación en el navegador. 
e NgModule: decorador necesario para el 
módulo. 


Importante 





e AppComponent: componente principal del módulo. 


import ( BrowserModule ) from '(Gjangular/platform-browser '; 
import ( NgModule ) from '(9angular/core'; 





import ( AppComponent ) from './app.component'; 


e Al decorador ONgModule con su metadata: 
e Declarations: AppComponent (vista del 
módulo por defecto). 
e Imports: BrowserModule (clase necesaria 
para el navegador). 
e Providers: en este caso, no disponemos 
de ninguno. 
e Bootstrap: AppComponent 
(componente principal). 
e A su clase: permite cargar la aplicación 
(AppModule). 





GNgModule (£ 

declarations: [ 
AppComponent 

1, 

imports: [ 
BrowserModule 

l- 

providers: [], 

bootstrap: [AppComponent] 


export class AppModule { } 


El archivo total agrupa todas las partes descritas que constituyen el módulo en sí 


mismo. 


import { BrowserModule } from 'Qangular/platform-browser'; 
import ( NgModule ) from 'gangular/core'; 
import ( AppComponent ) from './app.component'; 


fNgModule(( 
declarations: [ 


AppComponent 
1, 


imports: [ 
BrowserModule 
Ll 
providers: [], 
bootstrap: [AppComponent] 
» 
export class AppModule { ) 
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Descargado en: eybooks.com 






Lio Definición 
de un componente 


Un componente es una clase a la que se le añade un decorador (Component) y 
que permite crear nuevas etiquetas HTML mediante las cuales podemos añadir fun- 
cionalidad a nuestras páginas controlando determinadas zonas de pantalla. Básica- 
mente, los componentes se organizan en forma de árbol teniendo un componente 
principal donde, por defecto, su propiedad “selector” posee el valor app-root, gra- 
cias al cual el componente puede incluirse en nuestras páginas HTML (p. ej., en in- 
dex.html) mediante el tag <app-root></app-root> como veremos más adelante. 


<!doctype html» 
<html lang="en"> 
<head> 
«meta charset-"utf-8"» 
«title»007 Componentes</title> 
<base href="/"> 
«meta name-"viewport" 
content="width=device-width, initial-scale-1"» 
<link rel="icon" type="image/x-icon" 
href="favicon.ico”> 
</head> 
<body> 
</body> 
</html> 





Los componentes se componen de tres partes: 


e Anotaciones: metadatos que agregamos a nuestro código y que permite 
definir ciertas propiedades como son: 


<app-ro0t></app-root> 


selector: 'app-root', 


templateUrl:*.fapp.component.htmi 


chi»(ititie])e/h1» 


styleUris: ['./app.component.ess'] 


body[ background. cotor:ffifoc;) 
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e Selector: nombre a utilizar como tag en HTML para indicar a Angular que 
cree una instancia del componente cuando se encuentre con dicho tag. 

e Template: plantilla a utilizar para el componente y que se describe en 
el propio fichero ts del mismo. 

e TemplateUrl: indica el URL en el que se halla la plantilla en caso de 
definirse externamente. 

e Style: definición de estilos para la plantilla. 

e StyleUrl: array que contiene los diferentes archivos de estilos que 
pueden utilizarse en el componente en curso. 

e Host: permite encapsular ciertas partes del componente. 

e Directive: array con las directivas que pueden utilizarse en el 
componente. 

e Input: define variables que recogen información del padre. 

e Output: define variables que pasan información al padre. 


Vista: contiene el template que usaremos 
para elaborar la pantalla asociada al 
componente. Esta pantalla podemos definirla 
en un archivo auxiliar o bien dentro del /<div class="container"> 
propio archivo donde definimos la clase «hi»((title))«/h1» 
controlador encerrando el código HTML entre 1 </div> 

apóstrofos ("<h1>[(title))</h1>). 


app.component.html 





export class AppComponent { 
Controlador: clase que contendrá la lógica title - '007 Componentes'; 


del componente (definiciones, funciones, etc.) } 





Generalmente, un componente suele llevar asociados diversos archivos con el si- 
guiente cometido: 


En ejercicios posteriores, veremos que, al generar una 
aplicación con determinadas utilidades (p. ej., Angu- 
lar-CLL, se crea un componente por defecto con una 
serie de bloques como los que se han descrito, cuyo có- 
digo es similar al siguiente: 
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app.component.html: contiene el código HTML mediante el que 
fabricamos la pantalla (o Vista). 


app.component.css: define los estilos que usaremos en la vista del 
componente. 


app.component.ts: archivo que contiene la lógica del componente 
(Controlador) y que se escribe en TypeScript para ser traducido a 
JavaScript posteriormente. 


app.component.spec.ts: archivo usado para Importante 


la realización de test unitarios. 
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import ( Component ) from “*Rangular/core'; 


fAComponent ({ 
selector: "'app-root', 
templateUrl: "./app.component.html', 


styleUrls: ["'./app.component.css'] 


1) 


export class AppComponent { 


title = '007 Componentes' ; 





Veremos también cómo se crea cada uno de los archivos mencionados anteriormen- 
te con un contenido por defecto. 


v g juanto 
> È git 
> ag ele 
> (S node modules 


v ag src 
v E app 


3 app.component.css 
g app.component.html 





Recuerde que el objetivo del componente es gestionar la vista. Por tanto, si necesita 
escribir mucha lógica, es mejor plantearse elaborar un servicio donde ubicarla. 


Cuando se analice el ciclo de vida de un componente, veremos que es posible reali- 
zar ciertas inicializaciones al crear el componente en el método ngOninit. 


Un componente puede tener atributos de entrada y/o de salida para intercambiar 


información con otros componentes padres e hijos. Dichos atributos requerirán del 
uso de las directivas €eInput() y S0Output(. 
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Importante 


Us. Metadata - definición 


Los metadatos permiten configurar el comportamiento 
de una clase a la que se le ha asociado un decorador. 
En función del decorador asociado, los metadatos va- 
rían y definen características diferentes. Por ejemplo, 
una clase no se trata como un componente hasta que 
no se le asocia el decorador Component con su me- 
tadata necesaria. Los decoradores más comunes son O 
Component y Olnjectable Como recordará, habla- 
mos de metadatos cuando presentamos los módulos y 
componentes en los primeros ejercicios de este libro. 


A continuación, se muestra una relación de propiedades asociadas a una serie de de- 
coradores, así como el módulo que hay que importar para su utilización: 


Decorador 


Propiedades metadata Módulo a 
importar 





Input bindingPropertyName: string 
Output bindingPropertyName: string Output 
QAttribute attributeName: string Attribute 


fAHostlistener 


QHostBinding 





QComponent 





args: string[] HostListener 
eventName: string 


hostPropertyName: string HostBinding 




















animations: any[] Component 

changeDetection: 
ChangeDetectionStrategy 

encapsulation: ViewEncapsulation 

entryComponents: 
Array«Type«any»|any[]» 

interpolation: [string, string] 

moduleId: string 

styles: string[] 

styleUrls: string[] 

template: string 

templateUrl: string 

viewProviders: Provider[] 
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QGDirective exportAs: string Directive 
a y host: ([key: string]: string) 
inputs: string[] 

outputs: string[] 

providers: Provider[] 
queries: ([key: string]: any) 


selector: 





string 


Injectable 


bootstrap: NgModule 








Array<Type<any> 
declarations: 
Array<Type<any>]lanyl] 


entryComponents: 








Array<Type<any>lanyl[]> 
exports: Array<Type<any>lanyl[]> 
id: string 
imports: Array<Type<any> 
|ModuleWithProviderslany[]> 


providers: Provider[] 


schemas: 


AAA AA 


Pipe name: A Pipe 
Hep o ]- — CSC 
[espseg ————— |- —— ps 


En los próximos ejercicios veremos muchos ejemplos de metadata asociados a mó- 
dulos, componentes y directivas. A continuación, describimos las propiedades más 
importantes: 
(NgModule(1( 


declarations: [ 


(Component ( ( 


selector: 'app-root', 
AppComponent, 


Destacar 


1, 
imports: [ 


templateUrl: './app.component.html', 


styleUrls: ['./app.component.css'] 


n 


BrowserModule 
l» 
providers: [], 
bootstrap: [AppComponent] 


@Directive({ 
selector: '[destacar]' 


}) 


El gran libro de Angular 33 





34 


Animations: lista de animaciones del componente. 


Bootstrap: define los componentes que deberían tenerse en cuenta en el 
arranque cuando este módulo es Bootstrap. 


ChangeDetection: estrategia de detección de cambios utilizada por el 
componente. 


Declarations: lista de directivas/pipes pertenecientes al módulo. 


Encapsulation: estrategia de encapsulación de estilo usada por el 
componente. 


EntryComponents: lista de componentes que deben compilarse cuando 
se define este módulo. 


ExportAs: nombre usado para exportar la instancia del componente en 
una plantilla. 


Exports: lista de directivas, pipes y módulos que pueden usarse en otros 
componentes que tengan importado el módulo en curso. 


Host: mapa de propiedad de clase para enlaces de elementos de host para 
eventos, propiedades y atributos. 


Id: usado para identificar módulos en getModuleFactory. 


Imports: lista de módulos cuyas directivas/pipes exportadas pueden 
utilizarse en el módulo. 


Inputs: lista de nombres de propiedades de clase para enlazar datos como 
entradas de componentes. 


Interpolation: marcadores de interpolación personalizados utilizados en 
la plantilla del componente. 


ModuleID: ID del módulo ES/CommonjS del archivo donde se define el 
componente. 


Outputs: lista de nombres de propiedades de clase que exponen eventos de 
salida a los que otros pueden suscribirse. 


PreserveWhitespaces: permite mantener o eliminar espacios en blanco. 


Providers: define el conjunto de objetos inyectables disponibles en el 
módulo para este componente y sus hijos. 
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e Queries: consultas que pueden inyectarse en el componente. 


e Schemas: usado para declarar elementos y propiedades que no son 
componentes ni directivas Angular. 


e Selector: tag con el que se identifica el componente en una plantilla. 
e Styles: estilos “en línea" que hay que aplicar a la vista del componente. 


e StyleUrls: lista de URL con hojas de estilo que pueden aplicarse a la vista 
del componente. 


e Template: plantilla “en línea” aplicada a la vista del componente. 


e TemplateUrl: URL que apunta al archivo que contiene la vista del componente. 


e ViewProviders: lista de proveedores disponibles para el componente e hijos. 
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Hola Mundo (Manual) 





A continuación, mostraremos cómo fabricar una apli- 

cación “mínima” que nos permita mostrar una página 
sencilla en la que se muestre el texto “Hola Mundo 
(by TwoBy2)'. 


En sucesivos ejercicios veremos una forma más senci- 
lla y eficiente de hacer lo mismo (usando Angular-Cli), 
pero consideramos interesante mostrar cómo hacer 
manualmente lo mismo para que podamos valorar me- 
jor otras utilidades. 





1. En primer lugar, instalaremos Node.js (si aún no lo hemos hecho). Por 
favor, revise el ejercicio 004 dedicado a la instalación. 


gomco coqe 

rium pusye ivi] 
nuns grusues Depas) 
urco2 puse [esc] 
wsop paons drt) 
muqom pius (ime) 
MIUQOA2 [vay Cus) 


m— s quin 
vcgns| AUN gena. 
d 
"m 


2. Seguidamente, crearemos el directorio 009 HolaMundoManual. Para 
ello, abriremos una ventana de CMD y teclearemos: 





>cd C:NEj100 angular 


>mkdir 009 HolaMundoManual 


icrosoft Windows [Versión 10.0.14393] 


(c) 2016 Microsoft Corporation. Todos los derechos reservados. 


:¿YusersiJuan>cd C:1Ej1008 angular 


:1E5100_angular>mkdir 6011 HolaMundoManual 


:1Ej100 angular» 
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3. A continuación, dentro de este directorio, crearemos los siguientes ficheros 
utilizando el editor que deseemos (p. ej., Atom): 


e tsconfig.json: compilación utilizada por el compilador de TypeScript. 


W conf jn 


$o 3d 


"compilerOptions": [ 
"target": "es5", 
"module": "system", 
*"moduleResolution": "node", 
*sourceMap": true, 
"enitDecoratorMetadata": true, 
"experimenta llDecorators”*: true, 
"removeComments": false, 
"noImplicitAny"- falso 

L 

"exclude": [ 
"node modules", 
*typings/main", 
*typings/main.d.tz" 

1 

} 





e typings.json: identifica definiciones de TypeScript que hagan falta. 


Hypn 
1 
"ambientDepondencios": ( 
*es&-shim*: "github:DofinitelyTyped/DefinitelyTyped/es&-shim/es&-shim. d. tcu 7do6c 3ddo4f vaeb21f20054b5f 3XadSdabcSof abd" , 
*jasnine": *github:DefinitelyTyped/Def initelyTyped/jasmine/ jasmine.d. ts$7de6c 3dd94feaeh21 f 2005405f 3ad5dabcSef abd" 
} 
} 





e package.json: permite definir las dependencias del proyecto. 


5] peckaqe iam 
"name": "811 HolaMWundo Manual”, 
“version”; "1.0.0", 
"scripts": ( 
"start": “tsc MA concurrently \"npe run tsciwV" V nps run lite)" ”, 
*bap"s A 
*tsc:u": “tsc -w*, 
"lite": "lite-server*, 
"typings": "typings", 
"postinstall*: "typings install” 
Lh 
"license": "ISC", 
"dependencies": ( 
"angular2"- *2.0.0-beta.14”, 
"system]s": "0.19.25*, 
"es6-shim": **0.35,0", 
"reflect-metadata": "6.1.2", 
^rxjs": *5.0,0-beta.2”, 
"tone. js": "0,6,6" 
Hn 
"devDependencies": ( 
"concurrently": 7*^2.0.6^, 
"lite-server*: "2.2.0", 
"typescript": "^1.8,9"*, 
"typings": "^8. 2.12" 
1 
Y 





4. Seguidamente, instalaremos las dependencias del proyecto. Para ello, nos 
ubicaremos en el directorio C:NEj100 angularN009 HolaMundoManual 
y ejecutaremos npm install: 
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»cd C:NEj100 angular\009 HolaMundoManual 


»npm install 


*XEj188 angularie11 HolaMundoManual»npm install 
p deprecated node-uuidB1.4.8: Use uuid module instead 


p juanto581.0.8 postinstall C:1£3108 angularX811 HolaMundoManual 
b typings Install 


L— jasmine (ambient) 


juanto581.0.0 C:1E3100_angular1011 HolaMundoManual 
- angular282.80.8-beta.14 
-- concurrentlyd2.2.0 
- bluebird82.9.5 
alkge.5.1 
- ansi-stylesB1.1.0 
-- escape-string-regexpg1.0.5 
has-ansige.1.0 
"-- ansi-regexga,2.1 
strip-ansige.3.60 
supports-colorg0.2.0 
- commanderg? .6.0 
4-- cross-spawnge.2.9 





5. Crearemos el directorio app (C:NEj100 angularNv009 HolaMundoManual'app): 





»cd C:NEj100 angularN009 HolaMundoManual 





>mkdir app 


6. Dentro del directorio app crearemos los siguientes ficheros: 


e app.component.ts: permite definir un componente. 
e main.ts: permite cargar el componente raíz lanzando el framework. 


E app.component.ts B mons 


import [Component] from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser”'; 
import (AppComponent) from '../app/app.component'; 
omponent 
gc st F " bootstrap(AppComponent); 
selector: 'my-app', 
template: '«h15Hola Mundo (by TwoBy2)</h1>* 
y 
export class AppComponent ( ] 





7. El ültimo fichero que se creará será el fichero index.html en el directorio 
raíz (C:NEj100 angularN009 HolaMundoManualindex.html): 


8. Finalmente, ejecutaremos npm start y observaremos el resultado en nuestro 
navegador. 


O irer angle m X 
Q O D pomor 


Hola Mundo (by TwoBy2) 
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Comandos básicos. Hola 
Mundo (Angular CLI) 





Angular CLI es una herramienta que permite crear Importante 
aplicaciones Angular desde el terminal apoyándose 
en plantillas de código que, además de normalizar los 
desarrollos, agilizan la fabricación de todo tipo de ele- 
mentos como puede ser los componentes, los servicios 
y los pipes que veremos más adelante. 


CLI significa command line interface (interfaz de 
línea de comando) y, como su nombre indica, permite 
lanzar comandos desde un terminal para crear elemen- 
tos de Angular. 


Entre las funcionalidades que obtendremos al usar An- 
gular CLI destacan las siguientes: 





Herramientas para testing. 

Herramientas para despliegue. 

Servidor HTTP para lanzar el proyecto. 

Sistema live-reload que permite replicar de forma inmediata en el 
navegador cualquier cambio detectado en el proyecto. 


En el capítulo de instalación, ya mencionamos cómo instalar Angular CLI, pero, a 
modo de recordatorio, adjuntamos la sentencia necesaria para la misma: 


npm install -g angular-cli 


install -g gangular/cli 


Hn 
quos ] / fetchMetadata: EEE maproregistry uri https://registry.npmjs.org/http-proxy 





La opción -g nos permite realizar la instalación de forma global, lo que significa que 
podemos usarla desde cualquier lugar. Al final de la instalación, observaremos que 
el cursor se coloca de nuevo en el prompt de la ventana CMD, esperando alguna 
acción. 
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A partir de este momento, podemos realizar una serie de acciones que se ejecutarán 
mediante el comando ng seguido de alguna palabra clave u opción. 


ye optiosol SKIPPING OPTIONAL DCPCHDCMOY: Feevestsi^t. d. (mde mohulestganquiar cL umode: modules vchoki da ade we 
ules A sevent c ): 

y EE nota uerPeIMC OPTIOMA! DZPEMDENCY- Ueeupported platform for fumwentulit.1.2: werted [*ax*: "darwin" “arch 
Y Cowrrents (7057 1wLe32" ," arch" i "547 ]] 


S 


Builds your app and places it into the output path (dist/ by default). 
allies: b 
torpet (5trimg) (Default: development) Defines the build target. 
liasex: -t «value», -dev (--target-devolopeest), -prod (--targut=production), --targot <value» 
"ment (String) Defines the build eewiromment 
aliases: -o (valuo)>, .-envíronment «values 
output-path (Path) Path where output will be placed, 
ali *: -op valur), wetputPath «value» 
less) Bulld using Ahead of Tise compilatlos. 
:o-mot 


SM, --sOUrCemap, --sowrcemsps 
nk (Boolean) (Default: true) Use a separate bundle containimg only weedor librarios. 
1 -WC, vendorChunk 
rof (String) Bate url for tho application being built. 
bh «value», —bèselref «value» 
loy-url (String) URL where files will be deployed. 
ases loe», --deployürl «value» 
f. false) Adds more details to output logging 





Por ejemplo, podemos empezar a probar la ayuda con ng -- help. 


Los comandos más importantes son los siguientes: 


hep CN 
mew | Permite crear una nueva aplicó | 


generate Permite generar los siguientes elementos: class, component, 
directive, enum, guard, interface, module, pipe, service, etc. 





lint Permite usar tslint (herramienta que permite revisar el código 
durante su edición). 
Test Permite generar un directorio de salida para pruebas. 
lee — Sirve la aplicación y ejecuta pruebas. 


Compila la aplicación en un directorio de salida. 
get/set Obtiene/establece un valor de la configuración. 


doc Abre la documentación oficial Angular para buscar información 
sobre la palabra indicada. 
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eject Permite extraer el archivo de configuración de webpack. 


xin | Extrae los mensajes i18n de las plantillas. 


A continuación, vamos a crear un proyecto con Angular CLI para fabricar el clásico 
Hola Mundo. 





1. Para ello, abriremos una ventana de CMD y nos situaremos en el directorio 
C:1Ej100_angular para teclear el siguiente comando: 


:Wj108 angular?ng new HMAC 
iactalling ng 


- $ate .editorcoefig 
C:NEj100 angular»ng new HMAC creste: sretapphapp.compenent. css 
— creste srcVapp agp. component .htwl 


Vat 
est 
t 
este srcVappVogp. component spec ts 
ste srcVappVagp. component. ts 
ato SrCVapp'agp. module.ts 
sate srclassetsi.gitkeep 
sato srcVenvironments 1 enviransont prod. ts 
te seCVenvi noemest s Venvi ronmest ts 
te srcVfavicon. ico 
te src ndex html 
este srcWmin.ts 
to 
to 
to 
te 
te 


e Observaremos que, al final de la creación, 
aparece un mensaje que indica que el proyecto 


ato srcrpolyFilIs.15 
ato srerstyles.ess 
vato srCMtOSt. ts 

d seciisconfig. app. json 


se ha creado satisfactoriamente. pu 
e Seguidamente, abriremos el proyecto con ] mem 
nuestro editor (p. ej., en Atom bastará con ] —- srsti 


e package. json 


arrastrar la carpeta del proyecto sobre el propio mus emp 
Atom y se abrirá el proyecto completo). E A UR 

e Una vez abierto el proyecto, modificaremos el 
archivo app.component.ts ubicado en HMAC/ 
src/app y a la variable title le asignaremos el 
valor “Hola Mundo Angular CLT. 

e Podemos modificar también el fichero html 
que se crea por defecto ubicado en HMAC/ 
src/app/app.component.html para 
dejarlo simplemente con el siguiente contenido: 





«div style=”"text-align:center”> 
<h1> 
(ftitle)]! 
</h1> 
</div> 





2. Una vez salvado el archivo, pasaremos a ejecutar la aplicación (utilizando 
el comando serve) accediendo al directorio del proyecto y tecleando lo 
siguiente: 


100 angular»ed HMAC 

















00 angularXHMAC>ng serve 
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3. Observaremos que, tras una serie de mensajes, la aplicación arranca y 
recibimos un mensaje indicando que la compilación se ha realizado 


satisfactoriamente. 


:NEj190 angular»cd HAC 


:MEj100 namgulariHMACong serve 
* NG Live Devolopwent Servor iz listening on localhoct:4200, open ya 


h: de444c0b1279045c7407 


ime: 12367m5 
(e) polyfills.bumdie,js, polyfills.buedle, js. wap (polyfills) 1009 kö (4) [imitial] [rendered] 
(1) waia.bundlo.js, wala.buedle.]s.wap (maia) 5.36 kB (3) [initial] [rendered] 
{2} styles bundle.js, styles. bundle,]s.map (styles) 16.5 48 (4) [initial] [rendereó] 
(3) vendor,bundle.|s, vendor. bundle, js.map (vendor) 2.18 M8 [initial] [resdered] 
[4) 1niine.bendle.]s, ialine.bundls.]s.map (inline) 6 bytes [omtry] [ronderod] 


7 Compiled successfully. 





4. Por último, abriremos nuestro navegador y comprobaremos el resultado tras 
acceder al siguiente URL: 


http://localhost:4200/ 


f \ 
/ Q9 eic «UA 


€ > Q f |O localhost4200 Y 


EHT Aplicaciones 


Hola Mundo Angular CLI? 
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Elementos que se pueden 
crear con Angular CLI 
(Component, Directive, 


etc.) 
Tal y como comentamos en el ejercicio anterior, una de 
las acciones que podemos realizar con Angular CLI es 
crear diferentes tipos de elementos e integrarlos con nues- 
tra aplicación de forma automática. Para ello, usaremos 
el subcomando generate (ng generate o ng g en modo 
abreviado) seguido del tipo de elemento que deseamos 
crear y una serie de opciones. 





La sintaxis general es: 


ng generate tipo elemento nombre elemento 
opciones 





Es recomendable utilizar nombres sencillos, ya que los 
elementos que se crean automáticamente utilizan dicho 
nombre para añadirles alguna partícula o extensión según 
cada caso. 


Una de las ventajas de utilizar ng es que la utilidad se encarga de incluir las referen- 
cias a los nuevos elementos donde sea necesario como, por ejemplo, incluir el im- 
port y las declarations del elemento en el fichero app.module.ts si procede. 


Los distintos elementos que podemos crear son los siguientes: 


Elemento Abreviación Comentario 


Component ng g € ng g component nomComponente 
Es el principal elemento mediante el cual 
construimos los elementos y la lógica de la 
página. 


Directive ng gd ng g directive nomDirectiva 
Permite añadir comportamiento dinámico a 
HTML (estructurales y de atributos). 
ng g p ng g pipe nomPipe 
Genera una salida transformando un dato 
obtenido desde la entrada. 
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Service ng g s ng g service nomServicio 
Son clases complementarias a los 
componentes que permiten realizar 
cierta lógica o acciones como puede ser 
proporcionar datos a los componentes o 
realizar peticiones al servidor, etc. 


Class ng g cl ng g class nomClase 
Añade una clase a la aplicación. 

Guard ng g guard nomGuard 
Añade funciones que permiten controlar o 
activar ciertas rutas. 

Interface ng g interface nominterface 
Añade interfaces a la aplicación (contratos 
que otras clases han de cumplir para 
utilizarlos). 


ng g e ng g enum nomEnum 
Genera una enumeración. 


ng gm ng module nomModulo 
Elemento que permite agrupar 
componentes, servicios, directivas, etc., para 
crear una aplicación. 


A continuación, mostramos algunas opciones: 





Permite crear el elemento sin crear un nuevo directorio. 


--route=<route> Indica la ruta principal. Solo se utiliza para generar 
componentes y rutas. 


--Skip-router- | No crea la configuración de la ruta. Solo se emplea para 
generation generar rutas. 


Indica que la ruta debe ser la predeterminada. 


Indica que la ruta es “lazy” (carga los componentes 
cuando se necesitan). 


ls | inline css. Evita la creación de un fichero css. 
ES inline html. Evita la creación de un fichero html. 
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Para comprobar el funcionamiento de generate, simplemente crearemos una apli- 
cación a la que le añadiremos un componente y al que no daremos ningún uso, 
pero que nos permitirá observar qué ficheros se crean durante el proceso. 


1. En primer lugar, abriremos una ventana de CMD y nos situaremos en la 
carpeta Ej100_angular. 


2. Seguidamente, crearemos una nueva aplicación con el comando ng new y 
la renombraremos para añadirle el número de ejercicio: 





ng new EjemGenerat 





rename EjemGenerate 011 EjemGenerate 





| E = O 
:1Ej108_angular>ng new EjenGenerate 


installing ng2 z om m 
create .editorconfig ::XE 310606 angular»rename EjemGenerate 011 EjemGenerate 
create README md 
create srcXappVapp. component .c55 


create srcXappVapp. component . htm] 

create sreclapplapp. component. spec . ts 

create srclapplapp. component . ts 
pp.module.ts 





3. Acontinuación, nos ubicaremos en el directorio recién creado para la nueva 
aplicación y crearemos un componente con la siguiente sintaxis: 


ng generate component componentes/compol 


:1Ej100_angular>cd 611 EjemGenerate 


:1E3100_angular1011 EjemGenerate»ng generate component componentes/compol 
installing component 
srclapplcomponentes1compo11compo1 . component . css 


create srcXappNcomponentesYXcompo1Ncompol1 . component . html 
create srclapplcomponenteslcompo1lcompo1 . component . spec .ts 
create srclapplcomponentes1compo11compo1 . component . t s 
update srclapptapp.module.ts 


:1Ej100_angular1011_ EjemGenerate» 





4. Podíamos haber utilizado la sintaxis abreviada: 


ng g c componentes/compol 


5. Fíjese que al haber indicado componentes/compol, nos ha creado de 
paso la carpeta componentes bajo el directorio src/app para que podamos 
almacenar todos los componentes que creemos en la misma carpeta, de 
forma que quede más organizado. 
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6. Si abre el proyecto en su editor (p. ej., Atom), observará los ficheros que se 
han creado por defecto. 


v El ott EjemGenerate 
» i3 gu 
> i e2e 
> WU rode modules 
vl sc 
~ Bill opp 
v EM componentes 


im compo! 
3 compol.componentcss 
g compo!1.componenthtmi 
compo 1.componentspec.ts 
ES <ompo1.componentts 

S app.componentess 

app.componenthtml 

lil app.componentspec.ts 

RB app.componentt: 

EH app.module:s 





7. Si analizamos el fichero app.module.ts, apreciaremos que se han añadido 
de forma automática el import del componente y su referencia en el 
apartado declarations. 


El appmodulo. te 
import ( BrowsorModulo } from *fangular/platform-browsor*; 
import ( NgModule ) from 'Sangular/core'; 
import ( FormsModule ) from "Sangular/forms'; 
import { HttpModule ) from "Sangular/http.; 





import [ AppComponent ) from './app.component'; 


import [ CompolComponent } from './componentes /compol/compol component ' ; 


SNgModule(f 
declarations: [ 
AppComponent , 
L 
imports: | 
BrowserModule, 
FormsModule, 
HttpModule 
L 
providers: [], 
bootstrap: [AppComponent ] 
n 
export class AppModule ( ) 
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oo Descripción 
de un proyecto 


Al crear un proyecto, por defecto se crean una serie de 
1 li Importante 

carpetas y ficheros que son la base de nuestra aplica- 

ción y que iremos completando según la funcionalidad 

que queramos dar a la misma. 


Para analizar la estructura de una aplicación pode- 
mos utilizar alguna de las creadas en ejercicios ante- 
riores como por ejemplo la que creamos para mostrar 
cómo utilizar ng generate para crear un componente 
(011 EjemGenerate). 


Así pues, abrimos dicha aplicación con nuestro editor 
(p.e. Atom) y observamos la siguiente estructura: 


git Contiene los archivos necesarios para la gestión con GIT. 


e2e Carpeta que contiene los archivos de prueba, denominados end 
to end (de extremo a extremo) que se ejecutan con Jasmine. 

node modules | Contiene todos los paquetes y dependencias de Node.js de 

nuestro proyecto. 





.editorconfig Contiene la configuración de nuestro editor 


.gitignore Permite indicar archivos que queremos ignorar de cara al control 
de versiones git. 


karma.conf.js | Contiene la configuración para los test. 
package.json Describe las dependencias necesarias para ejecutar la aplicación 


protractor. | Configuración de test con Jasmine. 
conf.js 


SIC Carpeta que contiene los archivos fuentes raíz de la aplicación 


angular-cli. | Contiene la configuración de CLI. 
json 
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README.md 'Readme' clásico de cualquier proyecto compartido en GitHub. 


tslint.json Contiene la configuración del Linter para Typescript. 





La carpeta src es una de las más importantes puesto que es donde iremos incluyen- 
do nuestros componentes, servicios y resto de elementos de nuestra aplicación. Si la 
expandimos, podemos observar lo siguiente: 


Carpeta raíz que contendrá los componentes, servicios y resto 
de elementos que constituyen nuestra aplicación. 


assets Imágenes, vídeos y archivos en general que no son propiedad de 
ningún componente. 


environments | Contiene características relativas al entorno de trabajo. 
favicon.icon Imagen que permite identificar nuestra aplicación. 
index.html Archivo raíz donde se inicia la aplicación 


main.ts Es el primer archivo que se ejecuta y contiene todos los paráme- 
tros de la aplicación. 


polyfills.ts Asegura la compatibilidad con los navegadores. 
Estilos del proyecto. 
Puede contener test unitarios. 


Configuración de TypeScript. 


v o git 
> a hooks 


y E om > ga infó 
> m ee lll logs 
x s da objects 
: editorconhg i refs 
gágncre 
E anguiar<kgon <- COMMIT EDITMSG 
x karma.contjs 


t 
Ol packogejson zi config 


fjs 
oen. cin 


B isinzjson & HEAD 


E) index 
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v (S) node modules > Pied SJESELE de pen Gene Ex - BI epp 
il bin Project v lil componentes 
ll Gangular v E] 011 &enGenerate v lli compo! 
g » o gi 8 compol componentes 
- id iom compol.component.html 


> a node_madules 
[rad @ngtools Siw EB compol.component.spec.ts 
B, @types > Mi app EE compol.componentts 
Ue a app.componerntLcss 


abbrev We enorooments 
is là taronico app.componenthtml 


MM accepts B indexhimi EB app.componentspec.ts 
lll acorn Bl maints EB app.componentt« 


BB polyñik.ts 
Bl acorn-dynamic-import Bieiscu EH app.moduie.ts 


Bue 
B isconfigjson 
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^". Módulos: Creación 


Los módulos son clases que nos permiten organizar 
nuestra aplicación encapsulando funcionalidades con- 
cretas dentro de los mismos. Son agrupadores de com- 
ponentes, pipes, directivas, etc., relativos a una funcio- 
nalidad que permiten crear bloques reutilizables. 


Importante 


Utilizan el decorador 0NgModule que permite añadir 
metadata. 


Los metadatos contienen: 


e Declarations: declaración de componentes, 
directivas, pipes, etc. 

e Exports: exportación de clases para poderlas 
compartir con otros componentes. 

e Imports: importación de otros módulos que ofrecen clases usadas en 
nuestro módulo. 

e Providers: carga servicios para toda la aplicación y permite que estos se 
pasen al resto de componentes por inyección de dependencias. 

e Bootstrap: define el componente principal para el arranque y se utiliza en 
el módulo principal (root module). 





Como mínimo, siempre existe un módulo ya que, al crear una aplicación, se crea el 
módulo root, el cual permite que la aplicación se lance, pero este módulo lo anali- 
zaremos en detalle en el próximo ejercicio. 


Existen módulos que, a su vez, son librerías de módulos, como ocurre con el propio 
Angular, que ofrece librerías asociadas a paquetes npm y que permiten realizar im- 
portaciones selectivas segün nuestras necesidades. Por ejemplo, Angular posee libre- 
rías que son módulos como FormsModule, HttpModule o RouterModule. 


Al igual que las clases, los módulos pueden exportar u ocultar componentes, servi- 
cios, etc. 


Podemos crear módulos a mano, pero, por facilidad, recomendamos hacerlo con 


Angular CLI y, en este caso, los módulos se crean usando el comando generate 
de la siguiente manera: 


50 El gran libro de Angular 








ng generate module mimodulo 


Al crear el módulo, por defecto suceden dos cosas: 


e Secrea el directorio src/app/mimodulo. 
e Se crea el archivo src/app/mimodulo/mimodulo.module.ts, con la 
definición del propio módulo MimoduloModule dentro. 


Las opciones disponibles son: 


--app (aliases: -a) default value: 1st app 


Especifica el nombre o índice de la aplicación a utilizar. El índice hace 
referencia al orden de la app dentro del array asociado a "apps" en 
angular-cli.json. Por defecto, usa la primera app. 


--flat 
Si se indica —flat, no se crea un directorio. 
--module (aliases: -m) 


Especifica dónde se debe importar el módulo. Por ejemplo, si estamos 
creando mod3 y añadimos la opción --module mod2, se importaría 
el módulo recién creado en mod2. 


--spec 


Si se indica -spec, se crea el archivo mimodulo.module.spec.ts. 





routing --routing 


Si se indica -routing, se crea el archivo mimodulo-routing. 
module.ts. (archivo de módulo de enrutamiento). 





A continuación, crearemos una aplicación para afiadirle posteriormente un par de 
módulos y analizar la estructura asociada a los mismos. 


1. En primer lugar, nos ubicaremos en ej100 angular y crearemos el proyecto 
modCrea mediante el comando ng new: 








| C: 53100 angular»ng new modCrea ] 





installing ng 
create .editorconfig 
create README .md 
create srcNappNapp. component . css 


create srcNappVapp. component . html 

create srcXappNapp. component. spec . t'« 
create srcNappNapp. component . ts 

create srcNappNapp.module.ts 

create srclassets!.gitkeep 

create srcXenvironmentsVenvi ronment . prod . ts 
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2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100 angular, escribiremos lo siguiente: 








C:NEj100 angular»rename modCrea 013 modCrea 


3. Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso, 
usamos Atom) y observamos la estructura del proyecto poniendo el foco en 
la carpeta app. 


Project 


v lE 013 modCrea 
> n e?e 
> ® node modules 
v EM sc 
v lin app 


3 app.componentess 
E app.componenthtml 
¿hs appcomponentspects 
B eppcomponentts 
Bl spp moduets 

>» imn o4 





4. A continuación, ubicados en 013 modCrea, crearemos el módulo mod1 
tecleando lo siguiente : 


C:1Ej100_angular>cd 013 modCrea 
C:1Ej100_angular1013_modCrea>ng generate module mod1 


;:ME 3108 angular»cd 013 modCrea 


:1£31608_angular1913 modCrea»ng generate module modi 
installing module 
reate secyapplmod1lmod1.module. ts 
WARNING Module is generated but not provided, it must be provided to be used 


:Ej108_angular1013_modCrea> y 





5. Si analizamos la estructura, vemos que dentro de app ha creado una carpeta 
denominada modl y dentro de la misma, un archivo denominado modl. 
module.ts con la clase Mod1Module y el decorador 0NgModule. 


Proyect B modLmodaes 
import ( NgModule j from 'Mangular/core'; 
import ( CommonModule ) from 'Gangular/common'; 


~ lg 013 modCrea 


> m ee 

> (8) node modules 

vam se GNgModule (1 
v Ml pp imports: [ 


v BM mod! CommonModule 
Bl modi. moduet: 1 


3 appcomponentess declarations: [] 

g app.component.html p 

pn se export class ModiModule ( ) 
app.component: 

Bl appmodulets 
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6. Ahora, crearemos un segundo módulo (mod2) pero esta vez le diremos que 
no cree ningún directorio para el mismo y que, además, que una vez creado 
realice la importación en nuestro archivo app.module.ts. La sentencia que 
habrá que teclear será: 


ng g m mod2 --flat -m app 





a E ssema 


:1E3100 angularX013 modCrea»ng g m mod2 --flat -m app 
installing module 


create srclapplmod2.module.ts 
update src\app\app.module.ts 





:1E3100 angularl013 modCrea> 


7. Tal y como habíamos dicho, con -flat indicamos que no se cree carpeta 
para el módulo y con --m app indicamos que realice la importación en el 
módulo app. Efectivamente, analizando la estructura de la app, vemos que 
no se ha creado un directorio para mod2 y que se ha realizado el import 
de Mod2Module en app.module.ts. 


Project CAS 
import ( SrowserModule ) from 'Sangular/platform-browser'; 
v lg 013 moac import ( NgModule } from 'Sangular/core'; 
3 rea 
> MM ele import ( AppComponent ) from './app.component'; 


> (S) node. modules 


e e &hgModule(( 
declarations: [ 
v i p AppComponent 


v MM mod! P 
imports: [ 


E mod!.module.ts Browserttodule, 


3 appcomponentcss 
b 
g appomponenthtmi providers: [], 


bootstrap: [AppComponent] 


ks app.component spec.ts 
E app.component ts 
E app. modulets 
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^"^ Módulos: RootModule 


Tal y como comentamos en el ejercicio anterior, al crear una aplicación con Angu- 
lar CLI, se crea un módulo que por convenio se denomina AppModule y se alma- 
cena en el archivo app.module.ts, el cual denominamos módulo raíz y que es el 
que usa la aplicación en el arranque de la misma. 


La aplicación se inicializa pasando el módulo AppModule como parámetro a 
Bootstrap en main.ts. 


import ( enableProdMode } from 'gangular/core'; 
import ( platformBrowserDynamic ) from 'gangular/platform-browser-dynamic'; 


import ( AppModule } from './app/app.module'; 
import ( environment } from './environments/environment"'; 


if (environment.production) ( 
enableProdMode(); 
) 


platformBrowserDynamic().bootstrapModule(AppModule); 





Existen 2 formas de hacer Bootstrap: 


e Dinámico: se usa el compilador JIT (Just-in-Time) para compilar la 
aplicación en el navegador y luego inicializar la aplicación. Veamos cómo 
queda main.ts con esta opción: 





import ( platformBrowserDynamic ) from '“fangular/platform- 





browser-dynamic'; 


import ( AppModule ) from './app.module'; 








platformBrowserDynamic().bootstrapModule (AppModule); 


e Estático: precompila nuestra aplicación antes de enviarla al navegador, con 
lo que se obtiene una aplicación más pequeña que se carga con rapidez. El 
tamaño es mucho menor y la velocidad de ejecución más rápida. En este 
caso, main.ts queda así: 
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import ( platformBrowser ) from 'Gangular/platform- 


browser'; 


import ( AppModuleNgFactory ) from './app.module. 


ngfactory'; 


platformBrowser(). 








bootstrapModuleFactory(AppModuleNgFactory); 





Ambas formas de compilación generan clases de tipo AppModuleNgFactory. 
Como vemos en nuestro caso, por defecto se usa el siguiente código: 





platformBrowserDynamic().bootstrapModule (AppModule); 





Es decir, se usa la compilación dinámica (JIT) y arranca al AppModule descrito 
anteriormente. 


Para el análisis de este módulo, utilizaremos el existente en la aplicación creada en 
el ejercicio anterior (013 Modulos Creacion). 


l. Abrimos el proyecto 013 Modulos Creacion con nuestro editor (en 
nuestro caso, Atom) y localizamos el archivo app.module.ts. 


Project 
v ll 013 modCrea 
> a ce 
> (8) node modules 
" i sc 
v lim opp 
v lp mod! 
Bl modi. modulets 
a app.component.css 


g appomponenthtmi 
Aks appcomponentspec.ts 


EB oppcomponentts 


EB mod2module.ts 





import ( BrowserModule ) from 'fongular /platforn-browser”; 
2. Al analizar su contenido vemos que {fiot mme ) fron “gangular/core"; 


el archivo consta de una serie de import ( AppComponent } from -,/a0p,contonent'; 
» import ( Mod2Module ) from './mod2.module'; 
imports como son BrowserModule y 


Elgrodule (4 


NgModule procedentes de las librerías de Siidarstimn: 1 
Angular y, AppComponent de nuestra "iid 
propia aplicación. En nuestro ejemplo, p c 
importamos | Mod2Module porque |, 
expresamente habíamos creado el módulo ] LL ue 


p 


mod2 con la opción -m. Vemos también  ].... apeneduto 1 7 
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el decorador NgModule seguido de su metadata y, por último, de la 
clase AppModule, la cual exporta para que sea visible por otros elementos 
de la aplicación. Al entrar un poco más en detalle, obtenemos: 


NgModule 


BrowserModule 


Declarations 





Comentario 


Importa los elementos que se necesitan en el módulo. 


Decorador usado con los módulos en Angular y que define 


los metadatos que se van a utilizar en el módulo. 


Este módulo se importa solo en el root AppModule y 
proporciona servicios esenciales para lanzar y ejecutar la 
aplicación en un navegador. 


Define listas de clases view que se van a utilizar (en este 
caso, AppComponent). Angular utiliza 3 tipos de clases 
view: componentes, directivas y pipes. 


Servicios accesibles desde todas las partes de la aplicación 


Exports Define el subconjunto de declaraciones que estarán disponibles 
en las plantillas de componentes de otros módulos. 


Bootstrap 





Define el componente a llamar al inicializar la aplicación (p. 
ej., AppComponent). 
Cuando se lanza la aplicación, expande el template HTML 


de AppComponent en el DOM, dentro de las etiquetas 
del elemento «app-root- existentes en index.html. 


LES 
«Idoctype html» 
«htnl lang»"en"> 
<head> 
«meta charset="utf-8”> 
«title»ModCroac/title» 
«base hrefz"/"» 
«meta name="viewport” content="width+device-width, initial-scales1"» 
«link rele"icon" type="image/x-icon" href="favicon.ico"» 
</head> 
<body> 
</body> 
</htal> 


3. Metadata, en definitiva, indica Importante 
a Angular cómo se debe compilar 


y ejecutar un módulo, además 
de relacionar los componentes, 
directivas y pipes incluidos en el 


mismo. 
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to Componentes: Creación 


El componente es el elemento 
básico del desarrollo en An- 
gular. Una aplicación suele 
constar de una especie de ár- 
bol de componentes de varios 
niveles donde un componen- 
te puede llamar a sus compo- 
nentes hijos y, a su vez, estos odi 
llamar a sus propios hijos (o nosse E 
nietos del primero), y así su- : 
cesivamente. Un componen- 
te, básicamente, es una clase 
acompañada del decorador @ Class 
Component y se encarga de 
controlar lo que podríamos llamar Vista o zona de panta- portda} 
lla. A grosso modo, un componente está formado por un 
template, una metadata y una clase. 


Importante Template 


<hi>mi App...</h1> 


Metadata 





Según vimos en ejercicios anteriores, al crear una aplicación con Angular CLI, se 
crea un módulo por defecto y, dentro del mismo, se crea también un componente 
denominado app.component. El contenido por defecto del mismo es el siguiente: 
import ( Component ) from "'Gangular/core'; 
QGComponent (1 


selector: *app-root', 


templateUrl: "'./app.component.html', 


styleUrls: ['./app.component.css'] 


+) 


export class AppComponent { 


title = ‘app works!'; 





La composición de un componente es la siguiente: 
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e Import: permite importar otros componentes a utilizarse dentro del 
componente que se está definiendo. Como mínimo, importamos Component 
de Oangular/core. 


e Decorador: función de tipo decorador que posee un objeto con los 
metadatos que indican a Angular cómo se crea, compila y ejecuta el 
componente. 

e Export class: exporta la clase asociada al componente para hacerla visible 
a otros componentes, de forma que puedan usar sus propiedades y métodos 
dependiendo a su vez de la visibilidad establecida a los mismos. Hace las 
veces de controlador en la clásica arquitectura MVC (Modelo-Vista- 
Controlador). 


Los campos de metadata pueden ser los siguientes: 





Campo Comentario 


Selector Nombre que se utiliza para hacer referencia a nuestro 
componente (p. ej., <mi-aplicacion>) 


Template Contenido HTML de nuestro componente. 





TemplateURI Cuando el contenido es voluminoso, usamos un fichero 
externo para almacenar el template. 


StyleUrls Array que contiene las hojas de estilo que se van a 
utilizar. 


Directives Enumeración de las directivas que se van a emplear en el 
componente. 


Providers Enumeración de los providers que se van a utilizar. 


En los siguientes ejercicios detallaremos los diferentes campos de tipo template y ve- 
remos cuándo es mejor usar un tipo u otro segün cada caso. En el siguiente ejercicio, 
además de crear un proyecto y ver cómo crea el componente por defecto, crearemos 
otro componente adicional para ver cómo se hace con Angular CLI y cómo pode- 
mos utilizarlo fácilmente en nuestra aplicación. 





1. En primer lugar, nos ubicaremos en ej100 angular y crearemos un 
proyecto denominado cmpCrea mediante ng new. 


:N£j100 amqular»ng new cmpCreo 
installing ng? 
create .editorcoefig 
croate README -md 
create srctapplapp. component .css 
creste srcVapplapp. component ,btl 


create secVappNapp. component , spec. Ls 
create srcVvappNapp . component . t5 

croate secVappNapp.-module.ts 

croate smcVassots t. gitkoop 

creste srcVenvironments environment prod. ts 
create srcVenvironmentsVenvironment ts 
create secifawicon. ico 
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2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100 angular, simplemente escribiremos lo siguiente: 


C:NEj100 angular»rename cmpCrea 015 cmpCrea 


3. Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso, 
usamos Atom) y observamos cómo ha quedado nuestro componente por 
defecto. 





~ E 615 cmpcrea 
> È at 
> MM ele 
> ® node modules 


v m src 
v li app 
3 app.componentess 
app.componenthtni 
As app.componenLspec.ts 
Ls] app.componenLts 
ES app.modulc.ts 





4. A continuación, nos ubicaremos de nuevo en nuestro directorio 015 
cmpCrea y crearemos nuestro nuevo componente compol tecleando lo 
siguiente (ng generate component compol o de forma abreviada): 


ng g c compol 


5. Observaremos el resultado de la creación en la ventana de CMD y también 
la estructura que ha creado en el proyecto. Seguidamente, modificamos 
app.component.html para añadir el tag <app-compol> y arrancamos 
nuestra app para ver cómo aparece en el navegador. 
Para ello, en la ventana de CMD teclearemos: 








Progect 


C:NEj100 angular N015 cmpCrea>ng serve —— 


> mee 
> (B) node modules 
vim 
v li pp 
~ Ml compo! 


:XEj100 angular?rename cmpCrea 015 cmpCrea 
:1EJ100_angular>cd 615 cnpCrea 


:XEj100 angulari815 cmpCrea»ng g c compot 


nstalling component 3 compoleomponentess 


Bl compoleomponernthtm! 


create srctapplcompolcompo1 . component. css 
create srcVappicompoticompot . component html 


y 
create srcVappiconpoticonpot. component . spec ts Ms compo Lcomponentapec ts 


create srelapplcompoi! compol . component . ts 
update srcVapplapp. module.ts 


[ll compolzomponentts 
Bl sppsomponentess 


:MEj106 angular|015 cmpCrea» Bl aopaompenent.htmd 





Jis sppaomsponent sper ts 
BB sopcompenentt: 
Bl sopmosuleits 


> M assets 
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:MEj180 saguloriéiS cepCmea»ag serve 


El app.component. html 
** NG Live Duvulopnant Sarver is running on http://localbost:4208. ** 


<h1> lach: Bd5974d156653diOorbag 


(ftitle)) (9) polyfilis.bundle.]s, polyfills.bundle.map (polyfilis) 232 kB (4) [initial] [rendered] 


(1) main.bundle.js, mein.bundle.mep (main) 5.50 ks (3) [initial] [rendered] 
(2) stylez.bundle.js, ctyloz.bundlo.map (styles) 9.71 kB (4) [initial] [rendered] 
</h1> 43) vendor, bundle. js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered] 
(4) iniine.bundle.]s, inline.bundle.map (inline) & bytes [entry] [rendered] 
z Compiled successfully. 


«app-compo1» 





6. En el navegador, veremos cómo nuestra aplicación, además de mostrar el 
contenido de app.component.html (app Works!), muestra también el 
contenido por defecto de compol1.component.html (compol works!) 





/ Y 
/ o CmpCrea x IV 


€ qd 0 [O tocalnosta200 * a co 
» | Otros marcadores 


app works! 


compol works! 





Vamos a hacer una pequeña modificación en nuestro componente para dar- 
le un poco de funcionalidad y, para ello, modificaremos el fichero compol. 
component.html para que tenga el siguiente contenido: 
<p> compol works!</p> 
<div > 
<button (click)="saludar () “>Saludar</button><br> 


<h1>{{ texto ))</h1> 


«/div» 





7. Observamos que simplemente hemos incluido un botón al que le hemos 
asociado un evento (click), el cual invocará a la función saludar() 
cuando pulsemos sobre el mismo. Estos conceptos se explicarán con 
más detalle en ejercicios posteriores. Modificaremos también al archivo 
compol.component.ts para que la clase que se ha creado por defecto 
Compo1Component tenga lo siguiente: 


export class CompolComponent { 


texto: string; 


saludar () ( this.texto = "Hola Mundo en compol”; } 
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8. Vemos que en la clase simplemente se ha añadido la variable texto de tipo 
string y una función llamada saludar() que se invocará cuando pulsemos 
el botón que hemos añadido en nuestra vista. Mientras que la aplicación 
esté en marcha, cada modificación que realicemos se actualizará sobre la 
marcha en el propio navegador así que, en este punto, deberíamos ver 
nuestro botón Saludar. 





Á Q CmpCrez x 
e>coa | O localhost:4200 *|4 a “o 


» Otros marcadores 


app works! 


compo] works! 





9. Sipulsamos sobre el mismo, observaremos cómo nos saluda. 


fS nm 
SONG Un 


» Otros marcadores 








app works! 


compol works! 


| Saludar 


Hola Mundo en compol 
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Componentes: Template 
inline 





El Template es la parte del componente que permite di- 

señar la vista utilizando HTML y otros elementos como 
por ejemplo las directivas que veremos en ejercicios 
posteriores. 


Dicho template puede ser definido dentro del propio 
componente mediante el campo template situado 
dentro de la metadata del componente o bien, en el 
campo templateUrl mediante el cual definiríamos un 
archivo externo al que se haríamos referencia median- 
te su URL. 





En el siguiente ejercicio, crearemos un componente al que definiremos su templa- 
te inline usando la opción --inline-template. 


1. En primer lugar, nos ubicaremos en ej100 angular y crearemos un 
proyecto denominado cmpInline mediante ng new. 


(C:XEj100 angular»ng new cmpInline 
installing ng2 
e ,editorconfig 
README . md 
e srclapptapp.component.css 


> srclapptapp. component .html 
srcXappNapp.component.spec.ts 
srcNappNapp.component.ts 

e srcXappNapp.module.ts 
srcaVassets!.gitkeep 
srcienvironmentslenvironment.prod.ts 





2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100_angular, simplemente escribiremos lo siguiente: 





C:NEj100 angular»rename cmpInline 016 cmpInline 
Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso usa- 


mos Atom) y observamos como ha quedado nuestro componente (por de- 
fecto) app/app.component. 
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Descargado en: eybooks.com 
ay Project — CEjT00 angular016 cmpinline — Atom 
File Edit View Selection Find Packages Help 


Project 


v E 016 cmplnline 
1» 
> A 2e 


vam src 
v Mi spp 
S spp.componentess 
E app.componenthtml 
Is app<ompor entspec.ts 
¿pp.componentts 


5 app.modulets 





3. A continuación, nos ubicaremos de nuevo en nuestro directorio 016 
cmpiInline y crearemos nuestro nuevo componente compo] tecleando 
lo siguiente (ng generate component compol --inline-template o de 
forma abreviada): 





Ej100 angular *016 cmpInline»ng g c compol --inline-template 





Observaremos el resultado de la creación en la ventana de CMD y tam- 
bién, la estructura que ha creado en el proyecto. En ambas observaciones, 
podemos comprobar que el archivo compol. 
component.html no se ha creado. Sin em- 











bargo, si abrimos nuestro archivo compol. PA O 
component.ts, observaremos que el conteni- Project 

do HTML se ha descrito en el campo templa- v El 016 cmplniine 

te dentro de la metadata entre 2 acentos de e 

tipo 'grave'( N, el que se halla en el corchete > aee 


. E @ 
izquierdo): 
v Bn src 
"- app 
En Simbolo del sstema 
- component.css 
c; XE]100 angular»rename cmpiniine 816 cmpInline 
component spec. tc 
C: XEj100 angular»cd 616 cmpInline xónponEntbi 
(:4£31080 angular*816 cmpinline»ng g c compol --inline-remplate J app.component.ess 
installing component 
corpontdá i 
src\app\compol\compol. component, css pp.componenthtml 
sPcNappScompoicompoi.component,spec.ts 
- srcNXappcompoi'Ncompol.component.ts 
update srcXapp*app.module.ts app.componentte 


mponentsper ts 


C:1Ej108 angular1B16_cmpinlins>,, app.module.ts 


assets 
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Component (( 
selector: "app-compol', 
template: 
Spo 
compol Works! 
</p> 


, 


styleUrls: ['./compol.component.css'] 


)) 





Seguidamente, modificamos app.component.html para añadir los tags 
<app-compol></app-compol> y así mostrar nuestro compol y tam- 
bién, arrancamos nuestra app para ver cómo aparece en el navegador. 


BJ app.component html 


h1 





app-compol» 


Para ello, en la ventana de CMD teclearemos: 





C:NEj100 angular1016 cmpInline»ng serve 


[£l angular-cli 
C:1£J188 angular ^eic cmpinline»ng serve 


; 7e8c8235e320e540389c68 


: 14110m5 


(8) (polyfills) 232 kB (4j) [initial] 
{1} (main) 5.54 k8 {3} [initial] 
{2} (styles) 9.71 kB {4} [initial] 
(3) (vendor) 2.63 MB [initial] 
(inline) € bytes [entry] 





Si abrimos nuestro navegador y tecleamos http://localhost:4200/, veremos 
cómo se muestra nuestra aplicación, mostrando el contenido de app.com- 
ponent.html (app Works!) y también, el contenido HTML creado por 
defecto en nuestro compo1.component.ts (compol works!). 


4. Igual que hicimos en el ejercicio anterior, añadimos un poco de 
funcionalidad modificando el HTML de compil con el siguiente contenido: 
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<p>compol works!«/p» 
<div> 


«button (click)="saludar () “>Saludar</button><br> 


<h1>{{ texto ))</h1> 


c das 





Modificaremos también al archivo compo1.component.ts para que la cla- 
se que se ha creado por defecto Compo1Component tenga lo siguiente: 


export class CompolComponent { 
texto: string; 


saludar() ( this.texto - "Hola Mundo en compol"; 


O Cnplic x 
€ C Ô | G localhost:2300 ^ 4 ë © 


» | Otrosmarcadotes 


app works! 





compot works! 


Sahdar 


Hola Mundo en compol 
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inline 


De forma similar a la descrita en el ejercicio anterior, 
la parte relacionada con CSS (lenguaje usado para defi- 
nir la presentación de los documentos HTML o XML) 
también puede definirse dentro del propio componen- 
te usando el campo style de los metadatos, o bien me- 
diante el empleo de una referencia a un fichero con di- 
cha definición si usamos el campo styleUrls (el cual 
puede ser una colección, ya que es de tipo array). 


En el siguiente ejercicio, afiadiremos un componente 
al proyecto que creamos en el ejercicio anterior (016 
cmplnline) al que definiremos su style mediante la 
opción --inline-style. 


1. En primer lugar nos ubicaremos en ej100 
angular V016 cmplInline y crearemos un 


UEFA Componentes: Styles 


Importante 





nuevo componente denominado compo2 tecleando lo siguiente (ng generate 
component compo2 ----inline-style o de forma abreviada): 





Ej100 angular *016 cmpInline»ng g c compo2 --inline-style 


:XEj10e0 angularVe16 cmpInline»ng g c compo2 --inline-style 
nstalling component 
create srciappNcompo2 compo? . component . html 
create «rciappXcompo2Xcompo? . component . spec . ts 
create srciappicompo21compo2 . component .ts 
update srciapplapp.module.ts 


:XEj1iee angulari015 cmpinline» 





Observaremos el resultado de la creación en la ventana de CMD y también 
la estructura que ha creado en el proyecto. En ambos casos, podemos com- 
probar que no se ha creado el archivo compo2.component.css. Sin em- 
bargo, si abrimos nuestro archivo compo2.component.ts, veremos que 
ha creado un campo vacío (styles) dentro de metadata, en el cual podre- 
mos definir nuestro contenido CSS entre dos acentos de tipo grave ( ^, el 
que se halla en el corchete izquierdo): 
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fAComponent ( ( 


selector: '“app-compo2', 


templateUrl: '“./compo2.component.html', 
styles: [] 
)) 





Seguidamente, modificamos app.component.html 
para añadir los tags <app-compo2></app-compo2> 
y así mostrar nuestro compo2, y también arrancamos 
nuestra app para ver cómo aparece en el navegador. adas 


Jis compo? « orsponent spec ts 
Wl compolcomponentts 





app.component htmi 

€ :NEJ168_angulari016_capTnline»ng servo 

<h1> ** ti Live Developsest Server is running on http://localhost:4208. ** 

ash: f10971bce4243072d 5e 
E ise: 1145505 
{{title}} (8) polyfilìs.bundlu.js, połyfills.busdlo.map (polyfills) 232 ke (4) [initial] [rordored] 

11) mip. buadle.js, main .buedle.wap (maim) 7.17 kB {3} [initial] [rendered] 

</h1> (2) styles.bundle.js, styles bendle,map (styles) 9.71 kB (4) [initial] [renderea] 
(3) wendor.bundls.js, vendor.bendlo.map (voador) 2.63 MB [initial] [rendered] 
(4) inlime.bundle.js, inline bendlemp (inline) 0 bytes [entry] [rendered] 

«hr» Pl ; Compiled successfully. 

<app-compol></app-compol> 

<hr> 

<app-compo2></app-compo2> 


<hr> 


C:NEj100 angularN016 cmpInline>ng serve 


2. Si abrimos nuestro navegador y tecleamos http://localhost:4200/, veremos 
cómo se muestra nuestra aplicación, mostrando el contenido de app. 
component.html (app Works!), el contenido del compol añadido en el 
ejercicio anterior (compol works! y su botón Saludar) y también el 
contenido HTML creado por defecto en nuestro compo2.component. 
html (compo2 works!). 








/Q Cmplnline x UA 


é> C alo localhost4200 — » «neo 


» | Otros marcadores 





app works! 


compo] works! 


Saludar 


compo2 works! 





3. Ahora, vamos a hacer una pequeña modificación en el CSS de compo2 para 
definir algunas características de presentación. Por ejemplo, haremos que 
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los tags de tipo <p> muestren un tamaño de letra grande y que se aplique 
un fondo amarillo. También haremos que el texto comprendido entre los 
tags <h2> se muestre en azul. Así pues, los metadatos de nuestro compo2 
quedarán de la siguiente manera: 





fAComponent ({ 
selector: "'app-compo2', 
templateUrl: "'./compo2.component.html', 
styles: [^ 


p { font-size: xx-large ; background-color: yellow; } 


H2 { color: blue; } 





Seguidamente, añadimos un pequeño texto en el archivo compo2.compo- 
nent.html para poder comprobar cómo se visualizan los tags <h2>. Para 
ello, modificaremos dicho archivo para que quede de la siguiente manera: 
<p> 
compo2 works! 
</p> 


<h2>Texto en compo2</h2> 





4. Por último, si observamos nuestro navegador, veremos que se muestra el 
contenido de los 3 componentes (app, compol y compo2) y, concretamente, 
en nuestro último componente apreciaremos las características de presentación 
definidas inline. 


€ >C00 [0 barevo 44 4H € 0; 


= Cres marcadores 


O Cmprise x en 


app works! 


compol works! 


Saludae 


Hola Mundo en compol 





compo2 works! 


Texto en compo2 
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Componentes: 
Propiedades 





En un componente, podemos definir propiedades que utilizaremos para mostrar in- 
formación en las vistas o para condicionar el aspecto de las mismas. Para indicar al 
DOM que una de sus propiedades está ligada a una propiedad de nuestro compo- 
nente, usaremos los corchetes [ ], lo que denominaremos binding de propieda- 
des (property binding). En posteriores ejercicios se abordará el DataBinding 
con más profundidad. Podemos también hacer un binding con las clases CSS para 
condicionar un estilo al valor de una propiedad. 


En el siguiente ejercicio, mostraremos unos cuantos ejemplos de cómo ligar algu- 
nas propiedades del DOM a propiedades de nuestro componente permitiendo así 
la visualización o no de un bloque, habilitar o deshabilitar un botón, definir un 
link a partir de un valor o de aplicar una clase CSS dependiendo del valor de una 
propiedad. 


1. En primer lugar, nos ubicaremos en ej100_angular y crearemos el proyecto 
cmpProp mediante el comando ng new: 


C:NEj100 angular»ng new cmpProp 


:MEj180 angular»ng new cmpProg 
installing ag? 
create .editorconfig 
sd 


creste README. 


create sme\assets\.gitkoep 
creste srclermironeents environment prod, ts 
create seee I eomsest s Venvinonment . ts 





Seguidamente, renombraremos el proyecto para que haga referencia a nues- 
tro número de ejercicio. Para ello, ubicados en el directorio Ej100 angu- 
lar, escribiremos lo siguiente: 





C:NEj100 angular»rename cmpProp 018 cmpProp 


A continuación, abrimos nuestro proyecto con nuestro editor (en nuestro 
caso, usamos Atom) y modificamos el archivo styles.css añadiendo una 
definición para las clases fondo (para div), td (para celdas de la tabla que 
incluiremos) y tamB para el tamaño de los botones: 
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.fondo ( background: yellow; ) 


td ( text-align: center; 


vertical-align: middle; ) 








B ( height:60px; width:200px ) 


Seguidamente, modificaremos nuestro archivo app/app.component.ts 
para que la clase AppComponent quede de la siguiente manera: 
export class AppComponent ( 
title = "app works!'; 
ponFondo = true; 
mostrar = true; 
habilitar = false; 


referencia = "http://www.google.com"; 





A continuación, modificaremos el fichero app.component.html para que 
tenga el siguiente contenido: 


<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn.com/ 
bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity-"sha384- 
rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQOKnKkoFVhFOQhNUwEyJ" 





crossorigin-"anonymous"» 

<h1>((titlej))</h1> 

«div class-"container"» 

«table class-"table table-bordered table-hover"- 
«tr» 


<td><input type-"checkbox" name="ponFondo” 


[ (ngMode1) ]="ponFondo”>Fondo<br><br></td> 
«td»«div [class.fondo]="ponFondo”>Hola</div></td> 
</EX> 


<LE> 


«td colspan="2"><a [href]-"referencia" target=" blank">1( 


referencia ))</a></td> 


eye» 
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SLT 


«td»«button class-"btn btn-primary btn-success tamB” 
(click)-2"mostrar-!mostrar"»«span»(( mostrar ? “Mostrar” : "'Ocultar' 


))</span></button></td> 
<td><div [hidden]-2"mostrar"»«h2»5Se ve</h2></div></td> 
</tr> 
«tr» 


«td»«button class-"btn btn-primary tama” 
(click)-"habilitar-!habilitar"»(( habilitar ? ‘Habilitar’ 


'"Deshabilitar' ))</button></td> 


«td»«button [disabled]="habilitar” class-"btn btn-outline- 


primary tamB”>Prueba</button></td> 
Rm DE 


«/table» 


«/div» 





Observe que hemos afiadido la siguiente referencia para poder utilizar 
Bootstrap y, de esta forma, afiadir clases y funcionalidades a la aplicación: 





<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn.com/ 
bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” integrity="sha384- 


rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQOKnKkoFVhFQhNUWwEyJ" 





crossorigin-"anonymous"» 





Por ültimo, ejecutamos la aplicación y vemos cómo se muestra en el nave- 
gador. Para ello, nos ubicamos en nuestro el directorio de la aplicación y 
tecleamos ng serve: 


C:NEj100 angular»cd 018 cmpProp 





C:NEj100 angular1018 cmpProp>ng serve 


:X&j1ee angular»cd 918 cmpProp 


:1£3100_angulari918_cmpProp>»ng serve 
** NG Live Development Server is running on http://localhost:4200. ** 


{Ə} polyfills.bundle.js, polyfills.bundle.map (polyfills) 232 kB (4) [initial] [rendered] 
(1) main.bundle.js, main.bundle.map (main) 5.32 kB (3) [initial] [rendered] 
(2) styles.bundle.js, styles.bundle.map (styles) 9.76 kB (4) [initial] [rendered] 
(3) vendor.bundle.js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered] 
{4} inline.bundle,js, inline.bundle.map (inline) 8 bytes [entry] [rendered] 
ebpack: Compiled successfully. 
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J O cmprrop LAN Y 
€» € Ô [O bcshos:200 te a Boo: 
»| Ote marcadors 








http//www.google.com 


Prueba | 





Una vez arrancada la aplicación, podemos 
marcar y desmarcar el check Fondo para ver 
cómo se aplica el fondo según tengamos mar- 
cado el check o no, podemos hacer clic sobre 
el link que en el componente definimos como 
http://www.google.com y veremos cómo se 
abre una pestaña con dicho URL, podemos 
pulsar sobre el botón Mostrar para exponer 
o no un determinado bloque o sobre el botón 
Deshabilitar para habilitar o no el botón con 
la etiqueta Prueba. 





LAN 
€ 9 G QU ooo mpsowemaiegeevu s. 6 A 4 M e D: 
-1 Ora maratones. 











Google 


España 
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Componentes: Test 
Unitarios 





En general, los test son una parte muy importante del de- 

sarrollo, ya que son los que han de garantizar el buen fun- 
cionamiento de nuestras aplicaciones y, por tanto, evitar 
las posibles incidencias que pudieran aparecer una vez que 
el software esté en producción. Existen diversos tipos de 
test, pero los desarrolladores, en principio, deberían apor- 
tar sus test unitarios como parte de la documentación de 
sus desarrollos, demostrando el buen funcionamiento de 
los mismos. Es tal la importancia que se otorga a los test, 
que existe una metodología de desarrollo denominada 
TDD (test-driven development) o desarrollo orien- 
tado o dirigido por pruebas, que consiste en desarrollar inicialmente los test que han 
de superar los desarrollos y, a continuación, escribir el código que supere dichos test. 





Angular nos permite realizar test fácilmente ya que, por defecto, utiliza Jasmine 
(framework que permite probar código JavaScript) y Karma (“test runner” que per- 
mite automatizar algunas tareas de los frames de test). Es decir, sin configurar nada 
especialmente ya podríamos ejecutar un test justo después de crear un proyecto sim- 
plemente ejecutando npm test o ng test. La descripción de los test se apoya en 
ficheros denominados spec, que contienen un describe de las pruebas que quere- 
mos implementar y un expect() por cada una de las operaciones y resultados espe- 
rados de dichas pruebas. Incluye una API que permite realizar multitud de compa- 
raciones (toEqual, toBe, toContain, etc.) y que puede consultar en https://www. 


npmjs.com/package/jasmine-expect. 


En el siguiente ejercicio, elaboraremos un proyecto en el que incluiremos una clase 
para realizar una serie de operaciones matemáticas simples (sumar, restar, mul- 
tiplicar y dividir) y a la que someteremos a un test para verificar qué parte de 
la misma está probada, falta por probar o puede contener un posible error. A pesar 
de que el tema de los test es amplio, consideramos que con este ejercicio podemos 
realizar una introducción suficiente a este apasionante 


export class Operaciones | 


apartado de la programación. HEP RESO qui 


return numl + num2; 


1. En primer lugar, nos ubicaremos en ej100 T 
angular y crearemos el proyecto cmpTest return nami - nun2; 


) 


mediante el comando ng new: multiplicar(muml: number, nus: müsber): muwbee( 


return numl * num2; 


C:NEj100 angular»ng new cmpTest dividir(numi: number, naw2: number 
— return numi / num2; 
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Seguidamente, renombraremos el proyecto para que haga referencia a nues- 
tro número de ejercicio. Para ello, estando ubicados en el directorio Ej100_ 
angular, escribiremos lo siguiente: 








C:NEj100 angular»rename cmpTest 019 cmpTest 


A continuación, crearemos la clase operaciones usando Angular CLI. 
Para ello, nos ubicaremos en el directorio de la nueva aplicación y tecleare- 
mos lo siguiente: 





100_angular>cd 019 cmpTest 











100 angular 019 cmpTest>ng generate class operaciones 








Ahora, abrimos nuestra aplicación con el editor que usemos habitualmente 
(p. ej., Atom) y abrimos la nueva clase operaciones para definir las opera- 


ciones que queremos implementar. import ( Component ) from "Bangular/core'; 
import ( Operaciones ) from './operaciones'; 
PComponent ( ( 


2. Seguidamente modificaremos la clase AppComponent mesi gs aea 


tenplateUri: './app.component.html', 
del fichero app.component.ts para importar la] "ene Comme 
clase Operaciones y para que contenga la función feror: class appconponent t 


title - 'cmplost'; 


ngOn!Init() con una muestra de ejecución de las ceslinumber; 
Operaciones definidas en la clase anterior. erica 


res3:nunber; 
resá:nunber; 
. ngonInit()( 
3. Vamos a modificar el fichero app.component. let operaciones = new Operaciones(); 


this.res1leoperaciones.sumar(3,5); 


html para que contenga simplemente el título this. res2-operaciones.restar(9,5); 
this.res3=operaciones.multiplicar(5,8); 


de la aplicación y algunos resultados tras el uso this.rest=cperaciones.-dividir(12,4); 
de nuestra clase. 


<div> 
<h1> 
((title)) 
</h1> 


<p>Sumar: 3 + 5 = <b>{{ resi ))</b></p> / Gros: xw 


«p^Restar: 9 - 5 = «b»(( res2 ))</b></p> € + C |O loclhost4200 
«p»Multiplicar: 5 x 8 = «b»(( res3 ])«/b»«/p» 
«poDividir: 12 / 4 = «b»(( res4 ))«/b»«/p» 


</div> 


cmpTest 





Sumar: 3.- 5—8 


Resta: 9-54 


4. Guardamos todo y arrancamos la aplicación 
con ng serve ubicándonos en C:XEj100_ 
angular*X019 cmpTest. 


Multiplicar: 5 x 8 — 40 


Dividir: i2/4—-3 





5. A continuación, borraremos el fichero app.component.spec que se generó 
por defecto al crear la aplicación y, dentro de la carpeta src/app, crearemos 
el fichero operaciones.spec.ts donde definiremos nuestros test con la 
estructura describre-it-expect. 
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import ( Operaciones } from './operaciones'; 
describe('Test para operaciones”, () => { 


describe('Test para sumar y restar", () => 4 


it("Suma 2 numeros", ()-»( 
let operaciones = new Operaciones(); 
expect (operaciones.sumar(3,5)).toEqual(8); 
H; 
it("Resta 2 numeros", ()=>[ 
let operaciones = new Operaciones(); 
expect(operaciones,.restar(9,5)).toEqual(4); 





6. Seguidamente, vamos a abrir otra sesión de CMD y, desde C:NEj100 
angular*X019 cmpTest, ejecutaremos ng test para ejecutar todos los 
archivos de tipo spec que tengamos definidos. En este punto, observaremos 
que ya nos indica que se han ejecutado dos pruebas con éxito (Executed 
2 of 2 SUCCESS) y que, al mismo tiempo, se ha abierto una sesión de 
Chrome (navegador por defecto en la configuración que puede cambiarse) 
con el resultado de las pruebas que se han lanzado. En esta pantalla, vemos 
los textos que hemos incluido en describe y también que, de los dos 
resultados esperados, ha habido 0 fallos (2 specs, 0 failures). 


VE jit gloris owplestong test 
1% feildisg modelos 1/1 modulos $ octive/$ 18 2917 12:22:35 .425:1004M [korma]: Mo captured browse, qum Mom. 
J: Karma v1.7.1 server started at http.//0.0.0.0-90/6/ 
Laurhimg beer Orom with uelimiked coecurremcy 1 
aria irme Chin 78 19 3817 12:27:43 878-908 [lin Chrome 62.0.3202 (Windows 10 0.0.0) is idle 
hat MIS 
O [mose 62 0.3309. Midas JA 8.6 41]: Consected se socket: pata IRLI IAA iwi] NEM 6,4 


Jerome 629.300 (Minus 19 6,00): acutos doe È SKCUSS (0,006 secs / om secs} 
.. 


2 specs, 0 failures raise excepcion: Y 


Test para operaciones 


Test para surar y restar 
Suma ? numeros 
Resta 7 numeros 





7. Ahora, detenemos ng test pulsando CTRL+C y contestando S a la pregunta 
¿Desea terminar el trabajo por lotes (S/N)? Una vez detenido, volveremos a 
lanzar el test con la opción —code-coverage: 


C:Ej100_angular>ng test -code-coverage 


Aparentemente, el resultado es el mismo que hemos comentado anteriormen- 
te, pero si observamos la carpeta del proyecto, veremos que se ha creado den- 
tro de otra carpeta denominada coverage, donde se almacenan los elemen- 
tos que nos permitirán consultar qué parte del código se ha cubierto. Si pul- 
samos sobre el fichero index.html, se muestra una página en la que puede 
analizarse cuál es el porcentaje de la aplicación que tenemos cubierto. 

/ D Cosimo oon x ^ 


C O Merc joe angular 019 cmplest/cavaraqe/veidex htm 
v log 019 cmprest 
All files 
w Ee coverage 92.59% Statements BEN 100% Arach WE SON Funciors ME 92.34% Lines NODE 


> E src 


*  Sialements + > Branches * Funcions = 


3 base.css 3 10% | 1606 100% 00 


B182% wn 200% om 


E index html 


Icov.info 
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8. Si pulsamos sobre src/app para analizar qué parte nos falta, aparecerá otra 
pantalla que mostrará la clase operaciones que está incompleta respecto de 
las pruebas y, de nuevo, si pulsamos sobre operaciones, veremos cómo nos 
destaca el código pendiente de cubrir (multiplicar y dividir). 


D eX N 


e OMA AND rd 00 ende rra anner 


All fies src/app. All files ) src/app operaciones ts 
A wen inen cm (rar fuesen AE MO tenete Wo MN Fuere ANO OL Ln NN 






9. Vamos a completar los test que nos faltan CS inii o 
añadiendo al fichero operaciones.spec.ts je para mmy () => ( 
lo siguiente justo después del describe que 


tenemos para sumar y restar. be('Test para multiplicar y dividir', () => [ 


ltiplica 2 numeros", ()*»( 


10. Si relanzamos de nuevo el test con la opción — — f oesraciones = ne operaciones; 
code-coverage, veremos que ahora aparecen 
dos nuevos test y si refrescamos la página index. Paseo: aciones0); 
html, observaremos que ahora ya tenemos el  festioneraciones dividir(12,4)) tofqual (5 
100% de nuestra clase cubierto. 


pect(operaciones.multiplicar(5,8)).toEqual(49); 


X Kama / [M Code coverage sport ic. x ^ VES. 


* 9 QC|Q tkt angular 019 «mores. Be Y NN i 


C © lochost 


r All files 
Chrome 62.0.3202 (Windows t0 0.0.0) is idie 100% Statemerts HA 100% Branches UN 


Yasmine T 83.33% Funcions S! 100% Lines URN 


File = $ Simiemerts c 3 Sanches: 
: E T ^ : n 
it para operaciones s | — | 100% | 166 | 100% | 


Test pira surar y rest uc'app M 100. | tit 100 | 0n 





11. Para acabar, vamos a provocar un error para mostrar cómo se avisa el fallo 
de un test. Provoquemos el absurdo error de indicar que al sumar 3+5 el 
resultado es 9: 


expect (operaciones.sumar(3,5)) 


.toEqual (9) 





Al relanzar de nuevo el test (ng test) vería- 
mos cómo aparece un fallo (1 failure) indi- 
cando dónde se ha encontrado (Test para 
operaciones Test para sumar y restar 
Suma 2 numeros) y cuál era el valor espe- 
rado (Expected 8 to equal 9). 
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54's. Decoradores 


Un decorador define qué partes posee un elemento 
(componente, directiva, etc.) y permite extender la 
funcionalidad de una función empleando otra fun- 
ción. Mediante los decoradores, los componentes que- 
dan registrados y pueden utilizarse en otras partes de 
la aplicación gracias a la información añadida. En defi- 
nitiva, el decorador es una implementación del patrón 
de diseño decorator, el cual permite añadir funciona- 
lidad a un objeto dinámicamente evitando tener que 
crear un conjunto de clases que hereden de la inicial 
simplemente para añadir funcionalidad adicional. 
Existen cuatro tipos principales de decoradores: 


Importante 





De clase (p.e. Component and ?NgModule). 

De propiedades (en las clases, p. ej., @Input and (Output). 
De métodos (p.e. OHostListener). 

De parámetros (en el constructor, p. ej., Olnject). 


Los nombres de los decoradores empiezan con el símbolo @ seguido de un nombre 
que indica el elemento a decorar. Un ejemplo típico es el decorador Component, 
el cual se utiliza para decorar componentes y puede emplearse siempre que impor- 
temos previamente la clase Component de Cangular/core. Al crear un compo- 
nente con Angular CLI, vimos cómo dicha sentencia se incluía de forma automá- 
tica al inicio del archivo nombreCompo.component.ts. También hemos visto 
en ejercicios anteriores que, junto al decorador, se halla una metadata y que, en 
función del elemento a decorar, la misma varía. A continuación, mostramos una lis- 
ta de decoradores de Angular y el módulo que se ha de importar desde €angular/ 
core mediante la sentencia: 





import ( <MODULO> ) from "'Qangular/core'; 


Por favor, consulte la documentación en https://angular.io/ para obtener más 
detalles. 
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Módulo a 
Decorador : 
importar 
@Input Permite que los componentes reciban datos de | Input 
un componente padre 
@Output Permite que los componentes envíen datos a | Output 
su padre. 
@Attribute Recupera el valor de un atributo disponible en | Attribute 
el elemento host de este componente. 
@Hostlistener | Escucha el evento emitido por el host e invoca | HostListener 
el método decorado. 
@HostBinding | Actualiza el elemento host si un enlace de | HostBinding 
propiedad cambia. 


@Component | Indica cómo procesar, instanciar y usar un | Component 
componente en ejecución. 


Añade comportamiento a los elementos del 
DOM. 


DI busca una dependencia en cualquier 
inyector hasta llegar al host. 


@Injectable Indica a Angular que la clase puede ser usada | Injectable 
con DI. 


@NgModule Permite decorar módulos. NgModule 


@Optional Parámetro que marca una dependencia como | Optional 
opcional. El inyector proporciona null si la 
dependencia no se encuentra. 

@Self DI busca una dependencia propia, sin buscar | Self 
hacia arriba en el árbol. 

@SkipSelf DI busca dependencia en todo el árbol | SkipSelf 
empezando por el padre. 


A continuación, realizaremos un ejercicio con @Attribute y @Hostlistener para 
mostrar el uso de decoradores. 
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1. En primer lugar, nos ubicaremos en ej100_ Fm 
angular y crearemos el proyecto decora [33m 
mediante el comando ng new: 


C:VEj100 angular»ng new decora 


Seguidamente, renombraremos el proyecto para que haga referencia a nues- 
tro número de ejercicio. Para ello, estando ubicados en el directorio Ej100 
angular, escribiremos lo siguiente: 


C:1Ej100_angular>rename decora 020 decora 


A continuación, desde el directorio 020_ FAA 


are 
X AI CORPO Sp 5 
a arca a component ta 

sre 





rssfully created 








decora crearemos un nuevo componente — fom sers sn secors 
compol tecleando (ng generate com- e ies 


lappicompollcompol . component . cas 


ponent compol o de forma abreviada): EET IE Upma mer aont binl 
A neas 


C:\Ej100_angular\020_decora>ng g c compol 


Ahora, abrimos la aplicación con nuestro editor y añadimos en app.com- 
ponent.html lo siguiente: 





<app-compol miAtributo=”Valor de muestra para atributo”></ 


app-compol> 


B app.componest.htmi 
<h1> 


{{title}} 
</h1> 
<app-compol miAtributo="Valor de muestra para atributo"></app-compo1> 





De esta forma mostramos nuestro compol al arrancar la aplicación y tam- 
bién definimos un atributo que consumiremos desde nuestro componente 
mediante OAttribute. 


2. Seguidamente, modificaremos el archivo compol.component.html para 
añadir un par de variables que muestren las veces que hacemos clic o que 
pasamos el ratón sobre el componente y usar de esta forma el decorador 
( Hostlistener. El contenido será el siguiente: 

<p>compol works!</p> 
«div style-"background-color:powderblue;"» 


<br> Clicks : {{ contaClick )) 


<br> MouseOver: {{ contaOver )) 


«/div» 
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En compo1.component.ts, modificaremos su contenido quedando de la 
siguiente manera: 





import ( Component, Attribute, HostListener } from '“Rangular/ 


core”; 
fAComponent ({ 
selector: "'app-compol', 
templateUrl: "'./compol.component.html', 
styleUrls: ["'./compol.component.css'] 
}) 
export class CompolComponent { 
contaClick: number = 0; 
contaOver: number = 0; 


constructor ( @Attribute (`miAtributo’) atributo) (console. 


log (atributo); } 





@HostListener (*'click”, ["'$event']) 





onHostClick(event: Event) { 
console.log("click en app " + event); 
this.contaClick += 1; 

} 


@HostListener ('mouseover”, ['Sevent']) 





onMouseOver (event: Event) { 
console.log(“mouseover” + event); 


this.contaOver += 1; 





Por último, arrancamos la aplicación ubicándonos en C:1Ej100_angu- 
larNX020 decora y tecleando ng serve. En el navegador, moveremos el ra- 
tón sobre el componente y haremos algunos clics para ver cómo se actualiza 
el contador. Abrimos las herramientas de desarrollador (en Google Chro- 
me pulse CTRL+MAYUS+1) y en la Console vemos cómo se muestran los 
mensajes que indican el Valor de muestra para atributo obtenido con 
(C Attribute y cada evento ejecutado (MouseEvent) del ratón. 
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compol works! 
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25 Comunicación entre 
componentes 





La comunicación entre componentes puede realizarse 

de diversas maneras (servicios, observables, etc.), pero en 
este ejercicio, utilizaremos los decoradores Olnput y O 
Output mencionados brevemente en ejercicios anterio- 
res. Habíamos comentado que, mediante Input, pode- 
mos pasar datos desde un componente padre hacia un 
componente hijo. Con (Output, realizaremos lo con- 


trario. Pasaremos datos desde un hijo hacia su padre. 





El siguiente ejercicio propone un proyecto muy simple 

en el que un componente padre se encarga de recoger dos valores que le pasa al 
hijo para realizar una operación sencilla (suma, resta, multiplicación y divi- 
sión) y, una vez obtenido el resultado, el mismo se devuelve al padre para que este 
se muestre en su vista. 


En primer lugar, desde ej100_angular, crearemos el proyecto comBC mediante 
ng new: 


C:NEj100 angular»ng new comBC 


:MEjiBé amgularosg new cosac 
limstallimg ng2 

create .editorconfig 

create README má 

creste srclopplapp, component css 

create srclappl app. component .htal 

create src\appiapp. component . Spec ts 

creste srclopplepp. component , ts 

creste srcVoppVepp module ts 





create &ncVassets V. gi ticeop 

create srclenvironsents Lenviroement. prod, ts 
creste src\environsents\envi ronment, ts 
create sec\favicon. ico 


Seguidamente, renombraremos el proyecto de la siguiente forma: 


C:\Ej100_angular>rename comBC 021 comBC 


A continuación, desde el directorio 
021 comBC crearemos el componente 1... aparam cone ori cone 
compo] tecleando: eVejtes onu arscd 021 crac 


mstalled packages for tooling wis npe, 
oject 'comBC" seccessfully creatod. 


:MEj100 angularX821 cowBCong g c compot 
talling component 


Create GrcVagelcompot Vcompot . Component . Ces 
L compo Vcompot . component html 
C:1E3100 angular N021 comBC> Bip rite pi sse rre 
— — enu e op i E EE 
ng g c compol :Mj160 angular 671_combC> 
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Abrimos la aplicación con nuestro editor y dejamos en app.component. 
html el siguiente contenido: 





<div class-"padre"» 


<table border=1> 


«th colspan-"2" style="text-align:center”>Padre</th> 


ULA 
<td>Valor1</td> 
<td><input class-"form-control" [(ngModel)]="valor1"></td> 
Er 
Spr 
«td»Valor2«/td» 
<td><input class-"form-control" [(ngModel)]="valor2"></td> 
«tr» 
<LE> 
<td>Resultado</td> 
<td><b>(([ resultadoP ))</b></td> 
S tr 
«/table» 
</div> 


<app-compol [valorl1]-2"valor1" [valor2]-2"valor2" 


(envRes)="captaResultado ($event) "> 


</app-compol> 





En app.component.ts modificaremos la clase AppComponent para que 
tenga lo siguiente: 


export class AppComponent { 
valorl: string LOA 
valor2: string Not s 


resultadoP: number; 


captaResultado(event) ( this.resultadoP = event; ) 





Ahora, modificaremos compo1.component.html para añadir los botones 
con las operaciones: 
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«div elass-"hijo "> 


«table border-1» 


«th colspan-"4" style="text-align:center”>Hijo</th> 


ES 


«td»«button class-"tamB" (click)-"suma()"»-«/button»«/ 


«td»«button class-"tamB" (click)-"resta()"»-«/ 


tton»«/td» 


<td><button class-"tamB" (click)="multiplica()”>*</ 


tton></td> 


<td><button class-"tamB" (click)-"divide()"»/«/ 





tton»«/td» 
</tr> 
</table> 


«y se 





Seguidamente, modificamos compol.component.ts para que el import 
existente al inicio del fichero contenga lo siguiente: 











import ( Component, Input, Output, EventEmitter, 











AfterContentChecked ) from “Rangular/core'; 


También modificaremos la clase Compol1Component con el siguiente 
contenido: 
export class CompolComponent { 

QGInput() valorl: string; 

QGInput() valor2: string; 

auxl: number; 

aux2: number; 


GOutput() 























envRes: EventEmitter<number> = new E Emitter<number>(); 











ngAfterContentChecked() ( 
this.auxl = parseFloat (this.valorl); 
this.aux2 parseFloat (this.valor2); 
) 
suma () is.envRes.emit (this. 


resta() is.envRes.emit(this. 


multiplica() is.envRes.emit (this. 








divide() is.envRes.emit (thi 
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Por último, modificaremos el archivo styles.css con lo siguiente: 





div( 


width:250px; 


padding: 20px; 


display: block; 
text-align: center; 
) 
«padre ( background: tabe4b8; ) 


.hijo ([ background: 45af0f0; ) 





.tamB ( height:53px; width:53px; font-size: 20px; ) 


Arrancamos la aplicación tecleando ng serve desde C:NEj100 angu- 
larN021 comBC y vemos la aplicación en el navegador. Probaremos las 
distintas operaciones (suma, resta, multiplicación y división) para 
comprobar cómo el resultado llega al padre a través del evento que se lanza 
desde el hijo y que se captura desde el padre. 


:XFj1e08 angularie21 comBC»ng serve 
** NG Live Development Server is running on http://localhost:4208. ** 
sh: a1b2a224ffeosa66ac5e 
: 12720ms 
1e) polyfills.bundle.js, polyfills.bundle.map (polyfills) 234 kB (4) [initial] [rendered] 
11) main.bundle.js, main.bundle.map (main) 7.68 kB (3) [initial] [rendered] 
{2} styles.bundle.js, styles.bundle.map (styles) 9.85 kB (4) [initial] [rendered] 
43) vendor.bundle.js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered] 
{4} inline.bundle.js, inline.bundle.map (inline) 6 bytes [entry] [rendered] 
ack: Compiled successfully. 


- - o x 
——À 
[0 cac PAN N // Q9 coec * un 
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444. Componentes: Ciclo 
de vida (Lifecycle hooks) 


Las directivas y componentes poseen un ciclo de vida Importante 
de tal manera que se crean, se actualizan y finalmen- 
te se destruyen. Angular ofrece los lifecycle hooks (o 
“ganchos” del ciclo de vida) para que los desarrollado- 
res puedan aprovecharlos por mediación de interfaces 
cuyo nombre es idéntico al evento producido, pero 
anteponiéndole el prefijo ng. Las directivas poseen un 
ciclo más corto. 


Los lifecycle hooks son los siguientes: 


DIRECTIVAS 


ngonchartge 





e ngOnChanges: cuando 
se detectan cambios en las 
propiedades de entrada. El método recibe un objeto 
SimpleChanges de los valores de propiedad actuales y 
anteriores. 

e ngOnInit: tras la primera ejecución de ngOnChanges. 
Se llama solo una vez e inicializa el componente o directiva. 
Usamos este método para realizar inicializaciones justo después 
de la construcción del componente. Es un buen lugar para 
COMPONENTES cargar datos. 

e ngDoCheck: se usa para actuar sobre los cambios que 
Angular no captura y que pueden tener cierto interés más allá 
de un simple cambio de estado. 

« ngAfterContentInit: después de inicializar el contenido 
del componente. Solo existe en los componentes. 

« ngAfterContentChecked: tras cada comprobación del 
contenido del componente. Solo existe en los componentes. 
Comprueba el contenido visualizado en el componente. 
engAfterViewInit: después de que las vistas del componente 
se inicialicen y después de ngAfterContentChecked. 

e ngAfterViewChecked: después de cada comprobación de la 


wonbostroy 





ngAfrerViewlnit 


hgAferViewChecked vista de un componente. Se llama después de ngAfterViewInit 
y de cada ngAfterContentChecked. 
ngOnDestroy e ngOnDestroy: antes de destruir el componente. Usamos 


este método para realizar la limpieza de recursos que 
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Angular no realiza automáticamente y es un buen lugar para avisar a otros 
componentes de que el componente en curso se va a destruir. 


En el siguiente ejercicio realizaremos una pequeña aplicación en la que generaremos 
una traza de forma que podamos monitorizar cuál es la secuencia en la que sucede 
cada uno de estos momentos del ciclo de vida de un componente mediante la con- 
sola del navegador. 


1. En primer lugar, nos ubicaremos en ej100_angular y crearemos el proyecto 
cmpLH mediante el comando ng new. Seguidamente, renombraremos el 
proyecto para que haga referencia a nuestro número de ejercicio. Para ello, 
ubicados en el directorio Ej100_angular, usaremos el comando rename. 
A continuación, nos ubicaremos en nuestro directorio 022 cmpLH y 
crearemos un nuevo componente (compol) con el comando ng. 





C:NEj100 angular»ng new cmpLH 


C:NEj100 angular»rename cmpLH 022 cmpLH 





C:NEj100 angular»ed 022 cmpLH 











C:NEj100 angular N022 cmpLH»ng g c compol 


:XEj180 angular»ng new cmpLH 
installing ng2 

create .editorconfig 

create README.md 

create srcNappYapp.component .c55 

create srelapplapp. component .html 

create srcNappYapp. component . spec . ts 

create srclapplapp- component -ts 

create srelapplapp.module.ts 

create srcXassetsV. gitkeep 

create srcYXenvironments environment . prod .ts 

create srclenvironmentslenvironment .ts 


;:XEj100 angulari622 cmplH»ng g c compo 
installing component 
create srclapplcompo1lcompo1 . component .css 
create srclapplcompollcompo1 . component . html 
create srcXappVcompotdXcompo1 . component . spec ts 
create srclapplcompollcompo1 . component .ts 
update srclapplapp.module.ts 


:XEj100 angulari022 cmpLH»ng serve 





Una vez creado el componente, abriremos la aplicación con nuestro editor 
y modificaremos el archivo app.component.html para incluir nuestro 
componente compol: 
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<h1>([((title))</h1> 


<hr> 


<div class-"container bg”><br> 


En app.component «input class-"form-control" 


[ (ngModel)]-"salidaPadre"»«br» 
«/div» 


<br><hr><app-compol [entradaHijo]="salidaPadre”></app- 





compol> 


Observemos que dentro de las etiquetas <app-compo1>, hemos indica- 
do que queremos pasar a compol, el valor de la variable salidaPadre de 
app.component.ts (que definiremos a continuación) dentro de la variable 
entradaHijo (que también definiremos en compol). 


2. Modificamos app.component.ts para que la clase AppComponent quede 
de la siguiente manera: 
export class AppComponent { 
title = "app works!'; 


y 


salidaPadre: string - ; 





Modificamos el archivo compo1/compol.component.html para que 
tenga el siguiente contenido: 


<p>compol works!</p> 


<div class="container bg”> 





<br> En compo 1 <input class-"form-control" [(ngModel)]=" 


entradaHijo”><br><br> 


<div class="container”>Hola (( entradaHijo ))</div> 





</div><br> 


En la clase de compol modificaremos el import existente para que tenga lo 
siguiente: 


import ( Component, OnInit, SimpleChanges, Input, OnChanges, 


ViewChild ) from "'Gangular/core'; 





3. En la clase Compo1Component incluimos un método por cada momento 
del ciclo de vida: 
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export class CompolComponent implements OnInit ( 
@Input () entradaHijo: string = ""; 

contador: number - 0; 

constructor() { ) 

ngOnInit() ( this.mostrar (“pasa por ngOnInit"); ) 


ngOnChanges (cambios: SimpleChanges) { 


for (let propiedad in cambios) { 





let cambio cambios [propiedad]; 
let actual JSON.stringify(cambio.currentValue); 
let anterior = JSON.stringify(cambio.previousValue); 


this.mostrar (“Pasa por ngOnChanges. Propiedad (" + 
propiedad + ") valor actual (" + actual + ") valor anterior 


("* + anterior + ")"); 


ngDoCheck() ( this.mostrar (“pasa por ngDoCheck"); ) 


ngAfterContentInit() ( this.mostrar (“pasa por 


ngAfterContentInit"); ) 


ngAfterContentChecked() ( this.mostrar (“pasa por 





ngAfterContentChecked"); ) 


ngAfterViewInit() ( this.mostrar (“pasa por ngAfterViewInit"); 


} 


ngAfterViewChecked() { this.mostrar (“pasa por 


ngAfterViewChecked”); ) 





public mostrar (texto: string) ( 
this.contador += 1; 


console.log(this.contador + " - " + texto); 





Ahora, ubicados en el directorio 022 cmpLH, ejecutaremos ng serve y ob- 
servaremos cómo se muestra nuestra aplicación en el navegador. 
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:MEjié€ angulary022 cmptibag corvo 
1% NG Live Devolopmant Server is running om http://localhozt:4280. ** 
asb: 303dad37bS94be5bofo1 
lime: 131143m5 
husk (6) polyfills.bendla. js, polyfills.bendle.map (polyfills) 234 kB (4) [initial] [resdered] 
(1) main.bundle.js, msin.bundle.zap (main) 7.31 k8 (3) [initial] [rendered] 
(2) styles. bondle, js, styles.bundle map (styles) 9.71 k& (4) [initial] [rendered] 
(3) vendor.bendle,]5, verdor,bundle,map (vendor) 2.63 MB [Initial] [reedereg] 
(4) iniine.hondia.jz, inline.bundlo.map (inlima) 8 bytes [entry] [rendere] 
k: Compiled successfully. 


JO ovas NIA 
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app works! 


En app.component | 


compol works! 


En compo t [ 


Hola 





4. Una vez en el navegador, si estamos usando Google Chrome, mostraremos 
la Console acudiendo a Más herramientas -> Herramientas para 
desarrolladores. 


eet artos de ictum 


karral 
basga 


Mor starne 


Macanan 





5. De esta forma, podremos ver los displays de texto que se generan cada vez 
que ejecutamos la aplicación y cada vez que introducimos algún carácter en 
las cajas de texto de las vistas. 
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"4. Directivas: Definición 


Las directivas permiten añadir a HTML un comporta- Um 
miento dinámico mediante una etiqueta o un selector. A 
Dependiendo del tipo de directiva, podemos cambiar 
la apariencia o comportamiento de un elemento o 
incluso afiadir o eliminar elementos del DOM (do- 
cument object model o modelo de objetos del 


documento). 





Básicamente, existen dos tipos de directivas: 


e Directivas estructurales: alteran la estructura del DOM añadiendo, 
sustituyendo o eliminando elementos. Empiezan por asterisco (*). 
e ngFor: permite iterar sobre una lista de elementos y realizar diversas 
acciones en un HTML como, por ejemplo, fabricar listas. 
nglf: en base a una evaluación, crea o elimina elementos en el DOM. 
ngSwitch: gestiona conjuntos de tags eliminando los que no cumplan 
una condición. 
e Directivas de atributo: modifican la apariencia de un elemento o 
modifican su comportamiento. 
e ngClass: permite añadir o eliminar dinámicamente una o varias clases 
CSS en un elemento. 
e ngModel: habilita un mecanismo de binding bi-direccional. 
e ngStyle: permite asignar varios estilos inline a un elemento. 
También podemos considerar que un componente es un tipo de directiva concreto 
al que se le ha dado un decorador propio por tratarse de un caso especial. 


En el siguiente ejercicio se muestra cómo poder aplicar dos clases de forma condi- 
cional con ngClass. 


1. En primer lugar, nos ubicaremos en ej100 angular y crearemos un 
proyecto denominado dirNgClass. 


:Vcd ej1008 angular 


:XEj100 angular»ng neu dirNgClass 
installing ng2 
create .editorconfig 
create README .md 
create srclapplapp.component.css 
create srclapplapp.component . html 
create srelapplapp. component .spec.ts 
create srcVappVapp. component .ts 


92 El gran libro de Angular 





2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, ubicados en el directorio Ej100_ 
angular, simplemente escribiremos lo siguiente: 


C:NEj100 angular»rename dirNgClass 023 dirNgClass 


A continuación, podemos ubicarnos en nuestro nuevo directorio y arran- 
car la aplicación para verla en nuestro navegador. Para ello, teclearemos lo 
siguiente: 





C:NEj100 angular»cd 023 dirNgClass 








C:NEj100 angular V023 dirNgClass>ng serve 


:XEj1ee angular»cd 623 dirNgclass 


:XEj1ee angularXe23 dirMgClass>ng serve 
** NG Live Development Server is running on http://localhost:42090. ** 
ash: 9479e6538d5d4ba90619 
Time: 11859ms 
(8) polyfills.bundle.js, polyfills.bundle.map (polyfills) 232 kB {4} [initial] [rendered] 
(1) main.bundle.js, main.bundle.map (main) 4.94 kB (3) [initial] [rendered] 
12) styles.bundle.js, styles.bundle.map (styles) 9.7 kB (4) [initial] [rendered] 
(3) vendor.bundle.js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered] 
14) inline.bundle.js, inline.bundle.map (inline) O bytes [entry] [rendered] 
ebpack: Compiled successfully. 





/ f DirNoClass 


€> CO | © localhost:4200 











app works! 





Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso, usa- 
mos Atom) y modificamos el archivo styles.css añadiendo una definición 
para las clases fa (fondo amarillo) y lg (letra grande): 


fa ( background-color: rgb(255,246,51); ) 








lg ( font-size: 200%; ) 


Seguidamente, modificaremos nuestro archivo app.component.ts para 
que la clase App Component quede de la siguiente manera: 
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export class AppComponent ( 


title = '023 dirNgClass'; 


fondoAmarillo=false; 
letraGrande=false; 
checkFondo () { 
this.fondoAmarillo-!this.fondoAmarillo; 
) 
checkLetra()í 
this.letraGrande=!this.letraGrande; 
) 
asignaClases()í 
let classes = { 
fa: this.fondoAmarillo, 
lg: this.letraGrande 
y; 


return classes; 





3. Por último, modificaremos el fichero app.component.html para que 
tenga el siguiente contenido: 


<hl>[(titleji</n1> 
<input type="checkbox” (change)="checkFondo () “> 
Fondo. (fondoAmarillo = ((fondoAmarillo)))<br> 
<input type-"checkbox" (change)="checkLetra ()”> 
Tam.letra. (letraGrande = ((fletraGrande)))<hr> 
<div [ngClass]-"asignaClases()"» 
Este texto variará según el resultado del método.<br> 


Si fondoAmarillo=true -> el fondo será amarillo.<br> 





Si letraGrande=true -> las letras serán grandes. 


</div> 


«hr» 
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En el navegador, observaremos que nuestra aplicación muestra un texto con 
dos checkboxs que permiten cambiar el fondo de nuestro div y aumentar 
el tamaño de la letra según si los marcamos o no, o hacer ambas cosas. 
Pruebe a marcar y desmarcar para comprobar el efecto. 


5 Am 
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023 dirNgClass 


Bl Fondo. (fondoAmarillo — false) 
© Tam letra. (letraGrande — false) 





Este texto variará segun el resultado del método. 
Si foadoAmarillo-true > el fondo será amarillo. 
Si letraGrande-true -> las letras serán grandes- 
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023 dirNgClass 


Wi Fondo. (fondaAmarillo ~ false) 
2 Tun dera. (letrs Grade = true) 


Este texto variará según el resultado del método. 
Si fondoAmarillo-true -> el fondo será amarillo. 
Si letraGrande-true -> las letras serán grandes. 


CES ÓN 


€ > C Q |O ial 





arre... .o: 


»| Dios sarao. 





023 dirNgClass 


Wi Fondo. (fondoAmarillo = true) 
B Tam.Jetra, (letraGrande — false) 





Este texto variará según el resultado del método. 
Si foadoAmarillo-true -> el fondo será amarillo. 
Si letraGrande-true > las letras serán grandes. 





JO caian x Aum 
acé-^ueo: 


. Duca vaccines 





023 dirNgClass 


W Fondo. (fondoAmarillo = truc) 
M Tarn letra. (lerraGrande = trae) 


Este texto variará segün el resultado del método. 
Si fondoAmarillo=true -> el fondo será amarillo. 
Si letraGrande-true -> las letras serán grandes. 
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4. Directivas: nglf 


Tal y como habíamos comentado en el ejercicio an- 
Importante PLUMA : s da MM 
terior, *nglf permite añadir o eliminar un elemento 





al DOM si se cumple una determinada condición. A 
diferencia de la propiedad visibility de CSS donde 
se puede ocultar un elemento, nglf lo elimina físi- 
camente si la condición no se cumple, de forma que 
no consume recursos. 


En el siguiente ejercicio, mostramos unos elementos div basándonos en *nglf y en 
el valor asociado a unas variables de tipo Boolean. Dichos div se hallan anidados en 
una sencilla jerarquía que hemos llamado grupos, los cuales contienen subgrupos. 


TL 


En primer lugar, nos ubicaremos en ej100 angular y crearemos el proyecto 
dirNglf mediante el comando ng new: 


C:NEj100 angular»ng new dirNgIf 


¿cd Ej100 angular 


:XEj100 angular»ng new dirNglf 
installing ng 

create .editorconfig 

create README .md 

create srclapplapp- component. css 

create srcXappNapp. component. html 





Seguidamente, renombraremos el proyecto para que haga referencia a nues- 
tro nümero de ejercicio. Para ello, estando ubicados en el directorio Ej100 
angular, escribiremos lo siguiente: 








Ej100 angular»rename dirNgIf 024 dirNgIf 


A continuación, nos ubicaremos en 024 dirNglf y arrancaremos la aplica- 
ción para comprobar cómo funciona en nuestro navegador. Para ello, teclea- 
remos lo siguiente: 
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C:1Ej100_angular>cd 024 dirNglf 
C:1Ej100_angular1024_dirNglf >ng serve 


:1Ej100_angular>rename dirNglf 024_dirNglf 


:1Ej100_angular>cd 8624 dirNglf 


:1Ej100_angulari024_dirNglf>ng serve 
* NG Live Development Server is running on http://localhost:4208. ** 
ash: f55aeeb880e26df87fce7 
ime: 13e35ms 
(e) polyfills.bundle.js, polyfills.bundle.map (polyfills) 234 kB (4) [initial] [rendered] 
(1) main.bundle.js, main.bundle.map (main) 5.68 kB (3) [initial] [rendered] 
(2) styles.bundle.js, styles.bundle.map (styles) 9.71 kB (4) [initial] [rendered] 
(3) vendor.bundle.js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered] 
(4) inline.bundle.js, inline.bundle.map (inline) e bytes [entry] [rendered] 
ebpack: Compiled successfully. 





Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso, usa- 
mos Atom) y modificamos el archivo styles.css añadiendo una definición 
para las clases uno (para div de tipo grupos), dos (para subgrupos) y tamB 
para el tamafio de los botones: 


.uno( border: 3px solid 4F00; background-color: 
lightblue;) 


.dos( border: medium double #369; background-color: 


yellow; } 











.tamB( height:40px; width:300px; ) 


Seguidamente, modificaremos nuestro archivo app.component.ts para 
que la clase AppComponent quede de la siguiente manera: 








export class AppComponent { 


title = '024 dirNgIf'; 





grupol-false; 


grupo2-false; 





subgrupoll-false; 
subgrupol2=false; 


subgrupo21-false; 





subgrupo22-false; 





) 





A continuación, modificaremos el fichero app.component.html para que 
tenga el siguiente contenido: 
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<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn. 
com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” 
integrity-"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 
AZzGRnGxQOKnKkoFVhFOhNUWEyJ" crossorigin-"anonymous"» 





<hl>((title))</h1> 


«button type-"button" class="btn btn-success tamB” 


(click)-"grupol-!grupol"» 
Grupol. (grupol = ((grupol)))</button><br> 
<div *ngIf-"grupol" class="uno”>Grupol.<br> 


«button type-"button" class-"btn btn-primary tanb” 
(click)-2"subgrupoll-2!subgrupoll"»Subgrupoll. (subgrupoll = 


((subgrupoll)))«/button»«br» 
«div *ngIf-"subgrupoll" class="dos”>Subgrupoll<br></div> 


«button type-"button" class-"btn btn-primary tamB" 
(click)-"subgrupol2-2!subgrupol2"» 


Subgrupol2. (subgrupol2 = ((subgrupol2]))«/button»«br» 
«div *ngIf-"subgrupol2" class="dos”>Subgrupol2<br></div> 
</div> 
<br> 


<button type="button” class="btn btn-success tamB” 


(click) ="grupo2=!grupo2"> 


Grupo2. (grupo2 = ((grupo2)))</button><br> 


<div *nglf="grupo2"” class-"uno"»Grupo2.«br» 


«button type-"button" class-"btn btn-primary tamB" 


(click)-"subgrupo21-2!subgrupo21"» 
Subgrupo21. (subgrupo21 = ((subgrupo21)))</button><br> 
«div *ngIf-"subgrupo21" class-"dos"»Subgrupo21«br»«/div» 


«button type-"button" class-"btn btn-primary tamB" 
(click)-"subgrupo22-2!subgrupo22"» 


Subgrupo22. (subgrupo22 = ((subgrupo22)))</button><br> 
«div *ngIf-"subgrupo22" class="dos”>Subgrupo22<br></div> 


«/div» 
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Observe que hemos añadido la siguiente referencia para poder utilizar 
Bootstrap y de esta forma, añadir clases y funcionalidades a la aplicación: 





<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn. 


com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 


integrity-"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 





AZzGRnGxOQOOKnKkoFVhFOhNUWwEyJ" crossorigin="anonymous”> 


Por último, observaremos el aspecto de nuestra aplicación en el navegador. 
Si pulsamos sobre el botón del Grupol1 veremos cómo se despliega el div 
asociado. Si pulsamos sobre Subgrupol11 y Subgrupo12 aparecen los div 
de dichos subgrupos. Si pulsamos sobre todos los botones veremos todos los 
div asociados. 


FO ovs EAN N 
/ Q oat x UA € > O ( Ocho: 4 $ e Moa: 


€ > Q (Oe Q h F e He : 


024 dirNglf 


Grupo. (grupo! = true) 











Subgrupo11, (subgrupo11 = true) 


Subgrupo! 1 


Subgrupo12. (subgrupo12 = true) 





Grupo2. (grupo2 = false) 





subarupot1. (subgrupo11 = true) 


Subgrupo? 1 


Subgrupo 12. (subgrupo12 = true 


Subgrupo12 





Grupo2. (grupo? = true) 


Subgrupo?1. (subgrupo21 = true) 


Subgrupo22. (subgrupo22 = true) 


ubgrupo22 
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025 


Directivas: ngFor 


La directiva ngFor permite insertar bloques de código HTML de forma dinámica, 
basándose en una lista de elementos (en general, arrays). La sintaxis general es la 


siguiente: 


«tag *ngFor-"let elemento of elementos"»«/tag» 


donde tag es el elemento HTML que queremos 
crear segün el nümero de iteraciones (p. ej., 
div, p, li, etc.) y elementos en la lista de ele- 
mentos que iremos asignando uno a uno a ele- 
mento mediante let. 


Podemos averiguar el número del elemento que se está 
tratando si añadimos let i=index, tal y como se mues- 


Importante 





tra a continuación: 


«tag *ngFor-"let elemento of elementos ; let i-index “></tag> 


En primer lugar, nos ubicaremos en ej100 angular y crearemos el proyec- 
to dirNgFor. 


:XEj100 angular»ng new dirNgFor 
installing ng 


create 
create 
create 


create 
create 
create 
create 
create 
create 


.editorconfig 

README . md 

srclapplapp. component. css 
srclapplapp. component. html 
srclapplapp. component. spec . ts 
srclapplapp. component. ts 
srcNappNapp. module.ts 
srclassets!.gitkeep 
srclenvironmentsYenvironment. 





1. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, ubicados en el directorio Ej100_ 
angular, escribiremos lo siguiente: 
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C:NEj100 angular»rename dirNgFor 025 dirNgFor 


A continuación, nos ubicaremos en 025 dirNgFor y arrancaremos la apli- 
cación para comprobar cómo funciona en nuestro navegador. Para ello, te- 
clearemos lo siguiente: 


lar>cd 025 dirNgFor 

















LarN025 dirNgFor >ng serve 


Welcome to app! 
:X£j1060 angular»cd 025 dirWgror 


:1EJ100_angular1025_dirigFor>ng serve 
** NG Live Development Server is running on http://localhost:4200. ** 
ash: 96b9687cb89d67c3f769 
ime: 11668ms 
{0} polyfills.bundle.]s, polyfills.bundle.map (polyfills) 234 kB (4) [initial] [rendered] 
(1) main.bundle.]s, meln.bundle.map (main) 4.72 kB (3) [initial] [rendered] 
(2) styles.bundle.]s, styles.bundle.map (styles) 9.71 kB (4) [initial] [rendered] 
43) vendor bundle.js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered] 
(4) inline. .bundie.js, inline.bundle.map (inline) € bytes [entry] [rendered] 
bpack: Compiled successfully. 





Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso, usa- 
mos Atom) y modificamos el archivo app.component.ts para que la clase 
AppComponent quede de la siguiente manera: 


export class AppComponent { 
title = '025 dirNgFor'; 
public nombres = [ 


(nom:"uno",edad:10], 


(nom:"dos",edad:20], 


(nom:"tres",edad:30] 


l; 





Podemos observar que hemos creado un pequeño array denominado nom- 
bres con tres objetos compuestos únicamente por el campo nom y edad. 


2. A continuación, modificaremos el fichero app.component.html para que 
tenga el siguiente contenido: 


El gran libro de Angular 101 











<link rel="stylesheet” href="https://maxcdn. 





bootstrapcdn.com/bootstrap/4.0.0-alpha.6/ 


css/bootstrap.min.css" integrity-"sha384- 


rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 








AZzGRnGxQOKnKkoFVhFOhNUwEyJ" crossorigin-"anonymous"» 


<h1> 
{{title}} 
«/h1» 
«div class="container”><br> 


«ul class-"list-group"» 








«li class-"list-group-item list-group-item-success" 





*ngFor-"let nombre of nombres; let i-index"» 
<p>((i + 1)) - </p> 
<p>Nombre: <b>{{ nombre.nom ))</b></p> 
<p>, edad: <b>{{ nombre.edad))</b></p> 
</li> 
</ul> 


</div> 





Observe que hemos añadido la siguiente referencia para poder utilizar 
Bootstrap y, de esta forma, añadir clases y funcionalidades a la aplicación: 


<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn. 





com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” 


integrity-"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 








AZzGRnGxOOKnKkoFVhFOhNUWwEyJ" crossorigin-"anonymous"» 
Ahora, observaremos el aspecto de nuestra aplicación en el navegador. 
3. Si lo desea, comente la primera línea del archivo app.component.html 


(la de «link rel...) para comprobar el aspecto de la aplicación sin utilizar las 
clases de Bootstrap. 
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O anga AN ? : : 
€ -— 260 Obaban care. ..oo: y. Q DiNigFor x N 

1 — € Q (Y QOlochostz00 X $ 4 : 
025 dirNgFor ll 

















1 Nombre: uno, edad: 10 


025 dirNgFor 


2 -Nombre- des, edad: 20 


3 Nombre tres edad. 30 


. edad: 10 
. 2- 
Nombre. dos 
. edad 20 
» 3- 
Nombre: tres 
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uo Directivas: ngSwitch 


La directiva ngSwitch funciona como el Importante 


clásico switch que podemos encontrar en 
multitud de lenguajes (p. ej., JavaScript). 
Es decir, evalúa una expresión y compara su 
resultado con una serie de valores añadien- 
do al DOM el bloque asociado en caso de 
coincidencia. Funciona con los siguientes 


elementos: 


Keywords 


[ngSwitch]="variable” 


*ngSwitchCase 


*ngSwitchDefault 





Comentarios 


Expresión que se define como un atributo y 
que evalúa el contenido de variable. Utiliza la 
propiedad binding. Como variable, también 
puede usarse una interpolación ({{ exp }} como 
veremos en ejercicios posteriores). 

Define la comparación que se va a realizar. Si se 
cumple, se muestra el elemento HTML asociado 
(div, p, li, etc.). 

Define el elemento por defecto que se va a 
mostrar cuando no hay ninguna coincidencia. 





A continuación, mostramos una estructura simple: 


<elemento 


<e 


<e 


<e 


lemento *ngSwi! 


lemento *ngSwi! 





</elemento> 





tchCase-"' valorl'"»..«/e] 


tchCase- 





lemento *ngSwitch 


[ngSwitch]-"variable"» 








"' yalor2'"»..«/e] 


Default>..</elemento> 





También podríamos utilizar la siguiente sintaxis: 


«elemento ngSwitch-"(( variable ))”> 
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En el siguiente ejercicio vamos a mostrar un bloque u otro según el valor 
que asignemos a una variable al pulsar alguno de los botones incluidos en 
nuestra página. 


1. En primer lugar, nos ubicaremos en ej100_angular y crearemos el proyecto 
dirNgSwitch. 


¿cd ej188 angular 


.:ME3180 angular»ng new dirNgSwitch 
installing ng 


create .editorconfig 

create README.md 

create srcXappVapp. component . css 
create srcXappYapp. component . html 
create srcXappVapp. component. spec .ts 
create srcXappVapp. eE: ts 





2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100_angular, escribiremos lo siguiente: 








Ej100 angular»rename dirNgSwitch 026 dirNgSwitch 


A continuación, nos ubicaremos en 026 dirNgSwitch y arrancaremos la 
aplicación para comprobar cómo funciona en nuestro navegador. Para ello, 
teclearemos lo siguiente: 


lar>cd 026 dirNgSwitch 





Welcome to app! 











larX026 dirNgSwitch»ng serve 





;VEj188 angular>renane dirfgSwitch 020 dirWgSwitch 
:1£j109 angular?cd 026 dirfigSwitch 


:MEj100 angularVMO26 dirMgSwitch»mg serve 
* NG Live Development Server is running on http-//localhost;4200, ** 
ash: eSodr3obce2e5SF72ece 


(0) polyfilis.bond]e.js, poly*ills.buedle.mon (polyfills) 234 kB (4) [initial] [rendered] 
(1) main. bundle. js, main bondle.map (maim) 5.09 ka (3) [initial] [rendered] 

(2) styles.bundle.js, styles bundle.wep (styles) 9.71 kB (4) [initial] [rendered] 

m vendor, bundle i» vendor bundle. map perdi A = " [initial] [rendered] 





Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso, usa- 
mos Atom) y modificamos el título de la aplicación dentro del archivo app. 
component.ts para que la clase AppComponent quede de la siguiente 
manera: 


export class AppComponent ( 


title = '026 dirNgSwitch'; 





Seguidamente, modificamos el archivo styles.css añadiendo una definición 
para los colores de fondo de un par de DIV (bg y bg2) dejando el siguiente 
contenido: 
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.bg ( background-color: 4F9E79F; ) 











.bg2 ( background-color: 4D5F5E3; ) 


A continuación, modificaremos el fichero app.component.html para que 


tenga el siguiente contenido: 


<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn.com/ 


bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” integrity="sha384- 


rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxOOKnKkoFVhFOhNUWEyJ" 


crossorigin-"anonymous"» 


«hl»[((title)]«/h1» 


Sir 


<div class-"container bg" [ngSwitch]-"opcion"» Valor seleccionado: 


<div class-"container text-success" *ngSwitchCase-"'A'"»Ha 


opcion: <b>A</b></div> 


<div class-"container text-success" *ngSwitchCase-"'B'"»Ha 


opcion: <b>B</b></div> 


<div class-"container text-success" *ngSwitchCase-"'C'"»Ha 


opcion: «b»C«/b»«/div» 











<div class-"container text-danger" *ngSwitchDefault><b>Sin 


div» 
«/div» 
«br» 


<div class-"container"» 


elegido la 


elegido la 


elegido la 


selección</b></ 


«button class-"btn btn-primary btn-lg" (click)-"opcion-'A'"»A«/button» 


«button class-"btn btn-primary btn-md" (click)-"opcion-'B'"»B«/button» 


«button class-"btn btn-primary btn-sm" (click)-"opcion-'C'"»C«/button» 


«/div» 


«br 


«div class-"container bg2"»«h5»Boton pulsado : (fopcion))</h5></div> 


Observe que hemos incluido la siguiente referencia 





para poder utilizar 


Bootstrap y, de esta forma, afiadir clases y funcionalidades a la aplicación: 
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<link rel="stylesheet” href="https://maxcdn.bootstrapcdn. 


com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” 


integrity-"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 





AZzGRnGxOOKnKkoFVhFOhNUWwEyJ" crossorigin="anonymous”> 


Hemos querido poner tres botones de diferentes tamafios para ver algunas 
posibilidades de Bootstrap. 


3. Ahora, observaremos el aspecto de nuestra aplicación en el navegador. 
Vemos que, hasta que no pulsemos ningün botón, se mostrará el texto Sin 
selección. 

f/Qo E AN — 
€ > C Q [O hocahoses20o *| Roo: 
JU Dion 


026 dirNgSwitch 


Valor seleccionado; 
Sin selección 


a [aL 


Boton pulsado : 





4. Pulse cualquier botón para ver que, al cambiar de valor la variable opcion, 
también cambia el texto de Valor seleccionado. 


J O Origa <A | /Q onse — xA [0 ome x ] 
€ > C Q |O rahoto t] e i € > C OOo t] a i € > C O |O ran t] e i 
| Otros marcadores Dares marcadores Í Otros marcadores 


026 dirNgSwitch 026 dirNgSwitch 026 dirNgSwitch 


Valor seleccionado: Valor seleccionado: Valor seleccionado: 
Ha elegido la opcion: A Ha elegido la opcion: B Ha elegido la opcion: C 


nus L^ [s [5 joo 


Boton pulsado : A Boton pulsado : B Boton pulsado : C 
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w7 Directivas: ngModel 


ngModel es un mecanismo que permite actualizar 
los valores de las variables usadas en el componente deposito 

y en el archivo HTML de forma bidireccional. Este 
tema se ve con más detalle en los ejercicios dedicados 
al DATABINDING (One Way y Two Way). Antes 
de poder utilizar ngModel hemos de importar el For- 
msModule y añadirlo en la lista de módulos impor- 
tados en app.module.ts, tal y como explicamos en 
el ejercicio posterior: 





import ( FormsModule ) from '“Rangular/forms'; 


imports: [ BrowserModule, FormsModule ], 





El ejemplo más típico utiliza el elemento INPUT para mostrar su funcionamiento y 
su sintaxis general es la siguiente: 


<input [(ngModel)]="variable”> 


A la notación [()] también se le conoce como banana in a box por la forma 
gráfica resultante al imaginar que los corchetes representan una caja y los paréntesis 
una banana. En el siguiente ejemplo, vamos a trabajar con dos elementos de tipo 
INPUT donde observaremos que, al escribir en cualquiera de ellos, se copiará el tex- 
to al otro convirtiendo a minúsculas todo el texto en uno de ellos y a mayúsculas 
en el otro. Al mismo tiempo, mostraremos mediante interpolación el contenido de 
ambos INPUT. Hemos incluido un *ngIF para que el texto resultante de la concate- 
nación solo se muestre si hay algún carácter introducido en cualquier INPUT. 


1. En primer lugar, nos ubicaremos en Ej100_angular y crearemos el proyecto 
dirNgModel utilizando ng new. 


:Mej198 angular»ng new dirfigModel 
ünstalling ng 

create .editorconfig 

create README.md 

create srclapplapp.component.css 


create srclapplapp. component . html 

create srclepplapp. component. spec. ts 
create srcVappVopp. component. ts 

create srcVappNapp .odule.ts 

create srclassets!.gitkeep 

create srclenvironments environment prod. ts 
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2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100_angular, escribiremos lo siguiente: 








C:NEj100 angular»rename dirNgModel 027 dirNgModel 


A continuación, nos ubicaremos en 027 dirNgModel y arrancaremos la 
aplicación para comprobar cómo funciona en nuestro navegador. Para ello, 
teclearemos lo siguiente: 


100 angular»ed 027 dirNgModel 

















100 angularVN027 dirNgModel»ng serve 


:XEj166 angular»rename dirtigModel 027 dirWgModel 
:AEj100 angular»cd 827 dirNgModel 


:XEj166 angularX827 dirfgModel»ng serve 
** NG Live Development Server is running on http;//localhost;4208. ** 
ash: f8599e143cR204 f633cf 


(9) polyfills.bundle.js, polyfills.bundle.map (polyfills) 234 k8 (4) [initial] [rendered] 
(1) main.bundle.js, main.bundle.map (main) 5 kB [3] [initial] [rendered] 
(2) styles. bundle,js, styles, bundle.map (styles) 9.71 kB (4) [initial] [rendered] 
(3) vendor.bundle.js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered] 
(4] inline.bundle.js, inline.bundle.map (inline) 6 bytes [entry] [rendered] 
; Compiled successfully. 





Tal y como habíamos anticipado al principio, hemos de modificar también 
el archivo app.module.ts para que contenga las importaciones comenta- 
das y, en definitiva, lo siguiente: 


import BrowserModule ) from '“Rangular/platform-browser'; 
import NgModule } from "'"Gangular/core'; 
import FormsModule ) from '“Rangular/forms'; 
import AppComponent ) from './app.component'; 
f(NgModule ({ 

declarations: [ AppComponent ], 

imports: [ BrowserModule, FormsModule ], 

providers: [], 

bootstrap: [AppComponent], 


)) 


export class AppModule { ) 





Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso, usa- 
mos Atom) y modificamos el archivo app.component.ts para que la clase 
AppComponent quede de la siguiente manera: 
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export class AppComponent ( 


title = '027 dirNgModel'; 
nombre = V; 
nombre2 = VY}; 


cambiaNombre () { 
this.nombre-this.nombre.toLowerCase(); 
this.nombre2-this.nombre.toUpperCase(); 

) 

cambiaNombre2 () ( 


this.nombre2-this.nombre2.toUpperCase(); 


this.nombre-this.nombre2.toLowerCase(); 





Seguidamente, modificamos el archivo styles.css añadiendo una definición 
para los colores de fondo de los div existentes (bg y bg2) dejando el si- 
guiente contenido: 


.bg ( background-color: 4F9E79F; ) 








.bg2 ( background-color: #D5F5] 





A continuación, modificaremos el fichero app.component.html para que 
tenga el siguiente contenido: 


<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn.com/ 
bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384- 
rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQOKnKkoFVhFOhNUWwEyJ" 
crossorigin-"anonymous"» 
<h1>[(title))</h1> 
«bt» 
<div class-"container bg"» 
<br> 
<input class-"form-control" [(ngModel)]="nombre” 
(keyup) ="cambiaNombre ($event) “><br> 
<input class-"form-control" [(ngModel)]="nombre2” 
(keyup) ="cambiaNombre2 ($event) “><br> 
</div> 


<br> 


<div *ngIf-"nombre" class=" container bg2"» 


<h3>Hola {{ nombre }} / {{ nombre2 }}</h3> 


</div> 
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Observemos cómo se ve ahora nuestra aplicación en el navegador. 


€ > C (0 localhost4200 |È i 


|) Otros marcadores 


027 dirNgModel 

















3. Si introducimos el texto JuAnTo en cualquiera de las cajas de texto 
correspondientes a los INPUT, veremos cómo en la primera caja aparece 
todo el texto en minúsculas y en la segunda, en mayúsculas. 


A Deicide X ER. 


>c Um i 
027 dirNgModel- 











| juanto 





| JUANTO 
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o Directivas: ngStyle 


ngStyle permite asignar varios estilos inline a un elemento con la definición de 
una serie de estilos o bien al asociar una función que devuelve uno o varios estilos 
en función de una serie de condiciones. La sintaxis general es: 


[ngStyle]="('propiedadl': variable, 'propiedad2': 'valor2')]” 


Por ejemplo: 


[ngStyle]="(['color': color, "font-weight': 'bold' )” 





Si asociamos una función usaríamos: 
[ngStyle]="funcion()” 
Por ejemplo: 


[ngStyle]="defineEstilos ()" 





En el siguiente ejercicio, mostraremos un div en el que 

usamos ngStyle aplicando unos estilos más o menos 
fijos que solo se apoyan en una variable para determi- 
nar el color del texto y, a continuación, mostraremos 
un div al que asociamos una función que evaluará va- 
rias condiciones y dará como resultado un conjunto de 
estilos que se aplicarán simultáneamente. Al igual que 
en el ejercicio anterior, tendremos que importar For- 
msModule para utilizar ngModel (como veremos a 
lo largo del ejercicio). 





1. En primer lugar, nos ubicaremos en Ej100_angular y crearemos el proyecto 
dirNgStyle utilizando ng new. 


:\>cd Ej106 angular 


:MEj180 angular»ng new dirNgStyle 
installing ng 

create .editorconfig 

create README.md 


create srcXappNapp. component . css. 
create srcXappVapp. component. html 
create srclapplapp. component . spec. ts 
create srcXappNapp. component . ts 
create srcXappVapp. module.ts 

create srcXassetsY.gitkeep 
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2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, ubicados en el directorio Ej100_ 
angular, escribiremos lo siguiente: 








C:NEj100 angular»rename dirNgStyle 028 dirNgStyle 


A continuación, nos situaremos en 028 dirNgStyle y arrancaremos la apli- 
cación para comprobar cómo funciona en nuestro navegador. Para ello, te- 
clearemos lo siguiente: 


/ Q pee X XR 


00 angular»ed 028 dirNgStyle o cac 

















100 angular1028 dirNgStyle»ng serve 


Welcome to app! 


:1E3168_angularsronamo dirWgStyle 828 dirWgstylo 
:XEj106 angular»cd 628 dirWgStyle 


2;VE3100 angulari028 dirNgStyle»ng serve 
** NG Live Development Server is running on http://locslhost:4208. ** 
hash: of73563592258671b86a 
ime; 12733ms 
hunk {0} polyf111s dundle. js, polyfills.dundle. map (polyfills) 234 kB {4} [initial] [rendered] 
hunk {1} main.bundle.js, main. bundle.map (main) 4.03 k& (3) [initial] [rendered] 
hunk (2) styles.bundle.js, ztyles.bundie.mp (styles) 9.71 kB {4} [initial] [rendered] 
hunk (3) vendor.bundle.js, vendor.bundir.map (vendor) 2.03 MB [initial] [rendered] 
hunk {4} inline.bundlo.jz, inlino.bupndlo.map (inline) 8 bytes [entry] [rendered] 
k: Compilod successfully. 





Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso, usa- 
mos Atom) y, tal y como habíamos anticipado al principio, hemos de mo- 
dificar el archivo src/app/app.module.ts para que contenga las importa- 
ciones comentadas y, en definitiva, lo siguiente: 


import .. 


import ( FormsModule ) from "'8angular/forms'; 


imports: [ BrowserModule, FormsModule ], 


)) 





export class AppModule { ) 


Seguidamente modificamos el archivo app.component.ts para que la cla- 
se AppComponent quede de la siguiente manera: 
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Descargado en: eybooks.com 





export class AppComponent ( 








title = '028 dirNgStyle'; 

color = 'blue'; 
hayLetraGrande:boolean = false; 
hayColorFondo:boolean = false; 
hayLetraColor:boolean = false; 
hayLetraltalica:boolean = false; 
defineEstilos (){ 





let styles= ( 
“font-size”: this.hayLetraGrande ? '300$' : "initial', 


“background-color”: this.hayColorFondo ? '58FA58' 
EFFFFFFE!, 


'color': this.hayLetraColor ? "'red' : ‘black’, 
'font-style': this.hayLetraltalica ? 'italic” : 'normal” 


y; 


return styles; 





Seguidamente, modificamos el archivo styles.css al añadir una definición 
para cada uno de los div existentes (div1 y div2), dejando el siguiente 
contenido: 


«divi 1 


border-top: 10px solid blue; border-bottom: 5px solid red; 
height: 120px; width: 70$; 


background-color: #A9E2F3; 
) 


.div2 ( 


border: 10px solid green; height: 100px; width: 


background-color: +58FA58; 


text-align: center; 


} 
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A continuación, modificaremos el fichero app.component.html para que 
tenga el siguiente contenido: 





<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn.com/ 
bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity-"sha384- 
rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxOOKnKkoFVhFOhNUWEyJ" 


crossorigin-"anonymous"» 
«hl»5[((title))«/hl»«br» 


<div class-"container" [ngStyle]="('color': color, "font-weight': 


"bold', ‘font-size’: "'150$'j"»Texto2«/div» 
sbr- 
«div class-"container divl”> 


«input type-"checkbox" name-"hayLetraGrande" 


(ngModel) ]="hayLetraGrande”>Tamaño<br> 


" 


«input type-"checkbox" name-"hayColorFondo" 


(ngModel)]-"hayColorFondo"»Fondo«br» 





«input type-"checkbox" name-"hayLetraColor" 


(ngModel)]-"hayLetraColor"»Color«br» 


" 








«input type-"checkbox" name="hayletraltalica” 














(ngModel)]="hayLetraltalica”>Italica<br> 


<i> 


<br> 


«div class-"container div2" [ngStyle]-"defineEstilos()"»Texto«/div» 





Observemos cómo se ve ahora nuestra aplicación en el navegador. 


028 dirNgStyle 


Texto2 





3. Si marcamos los checkbox (Tamaño, Fondo, Color, Italica) veremos 
cómo varían los estilos del bloque inferior. 
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Q Doy. * 


D DiNi * 
C A 0 tocanostiz0o tr de: 


€ CO GOlecahcstiono t| : é 
|. Otros marcadores 


028 dirNgStyle 


Texto2 


iéTamaAto 
Utalia 


Qon x Q Dines x 
€ > Q € 0 locahostizoo yr de: € > C f [O tocalnostizo Yr 4^ i 
Otros marcadores 


028 dirNgStyle 


Texto2 


a 
Fondo 
Color 
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1”) Directivas: Mezcla 


En el siguiente ejercicio realizaremos una aplicación en 
la que se combinan las directivas mostradas en los ejer- 
cicios anteriores. Mostraremos una colección de núme- 
ros y un par de checkbox para escoger la visualiza- 
ción de números pares o impares, ambos o ninguno. 
En primer lugar, se muestra un botón mediante el cual 
podemos usar *nglf visualizando (o no) el div prin- 
cipal con los checkbox y números. Para los chec- 
kbox, usaremos ngClass para llamar a la función 
clActividad() que aplicará una clase cambiando el 
color (activo o inactivo). A continuación, usaremos 
el *ngFor para crear un div por cada uno de los números existentes en un array de 
números definido en el componente. Luego, usaremos ngSwitch para determinar 
el valor a comparar en *ngSwitchCase. Dicho valor será el resto de dividir el índi- 
ce de cada elemento dentro de la lista entre dos para saber si es par o impar. Según 
sea par o impar, se aplicará un color con ngStyle. 


Importante 





Al igual que en los ejercicios anteriores, tenemos que importar el FormsModule y 
afiadirlo en la lista de módulos importados en app.module.ts, tal y como explica- 
remos a lo largo del ejercicio. 


1. En primer lugar, nos ubicaremos en Ej100 angular y crearemos el proyecto 
dirNgMezcla utilizando ng new. 


:ME3108. angular»ng new dirWgMezcla 
installing ng 
create .editorconfig 
create README.md 
create srclapplapp. component css 


create seclapplapp. coeponent htm] 

create srclapplapp. component. spec. ts 

create srcXappNapp. cosponent . ts 

create srclapplapp.module.ts 

create srcVossets MV. gitkeep 

create srcienvironmentsVenvironment . prod . ts 





2. Seguidamente, renombraremos el proyecto ubicándonos en Ej100 angular 
y escribiendo lo siguiente: 





C:NEj100 angular»rename dirNgMezcla 029 dirNgMezcla 
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A continuación, nos situaremos en 029 dirNgMezcla y arrancaremos la 
aplicación para comprobar cómo funciona en nuestro navegador. Para ello, 
teclearemos lo siguiente: 





lar>cd 029 dirNgMezcla VO [0 ramo 














LarN029 dirNgMezcla>ng serve diese to app! 


;MEjiee angular»rename dirNgMezcla 029 dirWgMezcla 
:MEjiée angular»cd 829 dirMgMezcla 


1:M3100 sngularM29 dirNgMercla»eg serve 
* Ki Live Development Server 15 runsing oe http://localhost:4200, ** 
ash: SO1SAFGoBcA1docS12c5 


(6) polyfills.bundie,]s, polyfills.bundie,.map (polyfills) 234 Kk (4) [initial] [rendered] 
(1) maín.bundle.js, main.buedle.map (main) 5.71 ka (3) [initial] [rendered] 
(2) styles.bundle.js, styles.bundle.nap (styles) 9.81 kB (4) [initial] [rendered] 
(3) vendor. bundle. js, veedon.bongle.map (vendor) 2.63 MO [initial] ¡renósred] 
{4} iniine.bundle.]s, inliné.bundls.map (inline) € bytes [entry] [rendered] 
bpack: Compiled successfully. 





Ahora, abrimos nuestro proyecto y modificamos el archivo src/app/app. 
module.ts para que contenga las importaciones comentadas y, en definiti- 
va, lo siguiente: 


import ( FormsModule ) from '“Rangular/forms'; 


imports: [ BrowserModule, FormsModule ], 





Seguidamente modificamos app.component.ts para que la clase App- 
Component quede así: 


export class AppComponent { 
title = *029 dirNgMezcla'; 
mostrar false; 
numeros:number [] = [1,2,3,4,5,6]; 


pares:boolean = true; impares:boolean = true; 


colorPar = "blue'; colorImpar = "red'; 


clActividad (valor) ( 
let classes = ( activo: valor, inactivo: !valor ); 


return classes; 





Seguidamente, modificamos styles.css añadiendo diversas definiciones 
para div, textos y el botón: 
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9 


.divBg { border: 10px solid green; width: 70$; background-color: 


TF3F781; ) 





.tamB ( height:40px; width:50$; } 
sactivo 1 color; blue; y 


.inactivo( color:red; ) 





A continuación, modificaremos el fichero app.component.html para que 
tenga el siguiente contenido: 





<link rel="stylesheet” href="https://maxcdn.bootstrapcdn. 
com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” 
integrity-"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 


AZzGRnGxQOKnKkoFVhFOhNUwEyJ" crossorigin-"anonymous"» 





«hlstrtrtle))«/hi2«br 
<div class-"container" style-"text-align:center;"» 

«button type="button” class-"btn btn-success tamB” 
(click)-2"mostrar-!mostrar;pares-true;impares-true"» 
Mostrar. (mostrar = ((mostrar])])«/button»«br»«br» 

«/div» 

<div *ngIf-"mostrar" class-"container divBg”> 
<input type="checkbox” [(ngModel)]="pares” name-"pares"» 


<span [ngClass]="clActividad (pares) “>pares</span><br> 





<input type="checkbox” [(ngModel)]="impares” name="impares”> 
<span [ngClass]="clActividad (impares) ”>impares</span><br> 
«div class-"list-group-item-info" *ngFor="let numero of 
numeros; let i-index"» 
«div [ngSwitch]-"i$2"» 
«div *ngSwitchCase=""1'“> 
<p. ng 
{{i + 1))</span> - Numero: <b>{{ numero ))</b></p> 


f-2"pares"»«span [ngStyle]-"('color': colorPar)”> 





«/div» 
«div *ngSwitchCase-"'0'"» 
<p *ngIf-"impares"»«span [ngStylel]="('color': 


colorImpar)”> 


{{i + 1))</span> - Numero: <b>{{ numero ))</b></p> 


</div> 
</div> 
</div> 


</div> 
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Observemos cómo se ve ahora nuestra aplicación en el navegador. Si pul- 
samos el botón Mostrar, se visualiza el div principal con los números. Si 
desmarcamos los impares, vemos que el texto se pone rojo y solo se visua- 
lizan los pares. Por último, si desmarcamos los pares, solo se visualizan los 
checkbox. 


E a x 


[MD DeigMenie un AAA 

AA, € CO Onamo qt as. l 

e>00 [© tecalnasta200 ari - : 77 ee tione 
JU Cim sce 029 dirNgMezcla 


029 dirNgMezcla 








" n x 

JO ita o XA 
€ > Q0 (|o none» ar A. t 
E " J Otr marcadores jor Au 
029 dirNgMezcla €» OO Onom a a| d « 1 
READER 


A 029 dirNgMezcla - 
| 
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vo Pipes: Uso, 
parametrización 
y encadenamientos 


Cuando las aplicaciones muestran datos a los usuarios, 
raramente los muestran tal y como llegan desde los 
servicios u otras fuentes. Normalmente, lo que hacen 
es aplicar algún tipo de transformación antes de visua- 
lizarlos. Por ejemplo, una aplicación normalmente no 
mostraría una fecha como “Sun June 12 1977 00:00:00 
GMT+0200 (Central European Summer Time)”, sino 
que lo haría como “June 12, 1977”. 





Para realizar estas transformaciones tan comunes, An- 
gular ofrece los pipes. Los pipes nos permitirán realizar las transformaciones desde 
los mismos templates o documentos html. Vamos a ver unos ejemplos: 


1. Nos ubicaremos en ej100_angular, y crearemos el proyecto tecleando ng 
new pipelntro. Seguidamente lo renombraremos para que haga referencia 
a nuestro número de ejercicio al ejecutar rename pipelntro 030_ 
pipelntro, y finalmente pondremos en marcha la aplicación tras ejecutar 
ng serve desde la carpeta 030_pipelntro. 


:1Ej100_angular>ng new pipeTntro 

create pipelntro/e2e/app.e2e-spec.ts (292 bytes) 
create pipelntro/e2e/app.po.ts (208 bytes) 

create pipelntro/e2e/tsconfig.e2e.json (235 bytes) 


create plpeIntro/karma.conf,.js (923 bytes) 
create pipelntro/package.json (1315 bytes) 
create pipeTntro/protractor.conf.js (722 bytes) 
create pipelntro/README.md (1100 bytes) 

create pipeTntro/tsconfig.json (363 bytes) 
create pipelntro/tslint.json (3648 bytes) 
create pipeIntro/.angulan-cli.json (1128 bytes) 





2. Ahora abriremos nuestro proyecto con nuestro editor (en nuestro caso, 
usamos Atom) y afiadiremos el siguiente código en los siguientes archivos 
sobrescribiendo todo su contenido. 


src/app/app.component.ts 
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import ( Component ) from '“Rangular/core'; 


Component ({ 
selector: "'app-root', 
templateUrl: "'./app.component.html', 
styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 


fechal = new Date(1988, 3, 15); //15 de Abril del 1988 





src/app/app.component.html 





<p>Fecha (sin pipe) : (( fechal ))</p> 





<p>Fecha (DatePipe): {{ fechal | date ))</p> 








En el navegador veremos lo siguiente: 


Fecha (sin pipe) : Fri Apr 15 1988 00:00:00 GMT+0200 (Hora de 


verano romance) 


Fecha (DatePipe): Apr 15, 1988 





Todos los pipes funcionan de igual manera: dentro de la expresión de interpolación 
(^1(...))), justo después de la propiedad del componente, se añade un operador de 
pipe '|' y, a continuación, se añade el tipo de pipe a usar. 


Angular incorpora todo un conjunto de pipes para que puedan usarse desde cual- 
quier template: DatePipe para formatear una fecha, UpperCasePipe para trans- 
formar texto a mayúscula, LowerCasePipe para transformar texto a minúscula, 
CurrencyPipe para formatear un número como moneda, PercentPipe para for- 
matear un número como porcentaje, etc. Pero, además, también nos permite crear 
nuevos pipes personalizados. 


Por otra parte, un pipe puede aceptar parámetros. Estos se pasarán a la pipe a tra- 
vés del operador *:'. Si el pipe aceptara varios parámetros, los separaríamos con “:”. 
Ejemplo: ^(( ... | currency:'USD':false ]]". 


El valor de un parámetro puede ser una expresión de template válida, una cadena de 


caracteres o una propiedad/función de un componente. Esto significa que el cambio 
de formato puede controlarse con data binding (mecanismos que permiten la comu- 
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nicación entre un componente y su template) de la misma manera en la que contro- 
lábamos "fechal" en el ejemplo anterior. Veamos un ejemplo: 


3. 





En este ejemplo vamos a usar una función de un componente como valor 
de parámetro de un DatePipe. Está función devolverá ShortDate o FullDate, 
parámetros válidos para el DatePipe, según el valor de la propiedad 
“idFormatoFecha”, que podremos modificar mediante un botón. Para 
ello, añadiremos el siguiente código y lo pondremos a prueba desde el 
navegador: 





src/app/app.component.ts 


export class AppComponent { 


idFormatoFecha - true; // true -- shortDate ; false -- fullDate 


get formatoFecha() ( return this.idFormatoFecha ? "shortDate"' 


“fullDate'; ) 


cambiarFormatoFecha() { this.idFormatoFecha = !this.idFormatoFecha; 


) 


src/app/app.component.html 


<p>Fecha (DatePipe con "(( formatoFecha ))'): (( fechal | 


date: formatoFecha ))</p> 


«button (click)="cambiarFormatoFecha ()”“>Cambiar formato</button> 


O localhest:1200 5 — 
O focalhost4200 














pipe) : Fri Apr 15 1988 00:00-00 GMT+0200 (Hora de verano romance) 

pe) Fri Apr 15 1988 00:00:00 GMT-0200 (Hora de verano romance) 
Pipe): Apr 15, 1988 

Pipe): Apr 15, 1988 
Pipe con ona) 1/15/1988 

Pipe con "full Dae): Friday. Ay 


Por ültimo, comentar que los pipes pueden encadenarse para realizar 
diversas transformaciones una detrás de otra. El encadenamiento de pipes 
lo realizaremos usando el operador ‘|’ como separador. Veamos un ejemplo: 
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4. Para este último ejemplo añadiremos el siguiente código y comprobaremos 


desde el navegador cómo se aplican los pipes DatePipe y UpperCasePipe uno 
detrás de otro. 





src/app/app.component.html 


<p>Fecha (DatePipe con '“fullDate” 
date:'fullDate' | 


y UpperCasePipe): {{ fechal | 
uppercase ))</p> 


"LL UNA 
€ > Q | buite 











Fecha (sin pipe) - Fri Ape 15 1988 00:00.00 GMT*0200 (Hora de verano romance) 
Fecha (Date?ipe ). Apr 15, 1988 
Fecha (DatePype con 'nhortDate) 4/15/1988 
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(1. Pipes: DatePipe, 
UpperCasePipe 
y LowerCasePipe 





Angular por defecto incorpora los pipes DatePipe, 
UpperCasePipe, LowerCasePipe, DecimalPipe, Cu- 
rrencyPipe y PercentPipe para que puedan ser usa- 
dos desde cualquier template. 


Importante 


En este ejercicio veremos cómo usar DatePipe, 
UpperCasePipe y LowerCasePipe a través de diver- 
sos ejemplos. El resto, los veremos en el siguiente 
ejercicio. 





DatePipe 
DatePipe nos permite formatear fechas. Se usa de la siguiente manera: 


date expression | date[:format] 
donde: 


e date expression es un objeto fecha, un número (milisegundos respecto fecha 
UTC epoch [1 de enero de 1970]) o un cadena de caracteres con formato ISO 
(http://www.w3.org/TR/NOTE-datetime). 

e format es una cadena de caracteres que identifica el formato con que el que se 
quiere visualizar la fecha. Puede contener alguno de los valores predefinidos 
validos: medium, short, fullDate, o una combinación de símbolos ('y': año, 
“M': mes, etc.) para crear nuevos formatos. Consulte https://angular.io/api/ 
common/DatePipe para más información. 

UpperCasePipe 
UpperCasePipe transforma un texto a mayúsculas. 
LowerCasePipe 
LowerCasePipe transforma un texto a minúsculas. 


Vamos a ver ejemplos de estos pipes. 


1. Nos ubicaremos en ej100_angular, y crearemos el proyecto tecleando ng 
new pipeDisp. Seguidamente lo renombraremos para que haga referencia 
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a nuestro número de ejercicio ejecutando rename pipeDisp 031_ 
pipeDisp, y finalmente pondremos en marcha la aplicación ejecutando ng 
serve desde la carpeta 031_pipeDisp. 


2. Primero crearemos el componente a partir del cual realizaremos el ejercicio 








C:1Ej100_angular1031 pipeDisp>ng generate component datePipe 


:1E3100_angular1031_pipeDisp>ng generate component datePipe 
create src/app/date-pipe/date-pipe.component.html (28 bytes) 
create src/app/date-pipe/date-pipe.component.spec.ts (643 bytes) 


create src/app/date-pipe/date-pipe.component.ts (288 bytes) 
create src/app/date-pipe/date-pipe.component.css (0 bytes) 
update src/app/app.module.ts (406 bytes) 


:1Ej100_angular1031_pipeDisp> 





Seguidamente abriremos el proyecto con nuestro Iess z 
editor Atom, y en el template principal de la aplica- ]* 99-—- 
ción pondremos el siguiente código para que cargue fees" 
nuestro componente. Podremos comprobarlo desde 
el navegador. 


src/app/app.component.html 


<app-date-pipe></app-date-pipe> 








Finalmente añadiremos los ejemplos en el código. Desde el navegador, po- 
dremos ver el resultado. 


src/app/date-pipe/date-pipe.component.ts 


export class DatePipeComponent implements OnInit ( 


fecha: Date - new Date(1988, 3, 15, 12, 30, 15); //15 de Abril del 


19898 12:30:15 


src/app/date-pipe/date-pipe.component.html 


«div» 





<p><b>DatePipe: ejemplos de uso</b></p> 
«table style-"width:100$"» 


<colgroup><col style-"width:40$"»«col style-"width:60$"»«/ 


colgroup> 


SL 
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«td ngNonBindable»(( fecha ))</td> 


«td»[(( fecha ))</td> 


etr? 


«tr 


«td ngNonBindable»í(( fecha | 


<td>{{ fecha | 
«Jtr 


SEE 


«td ngNonBindable»í(( fecha | 


<td>{{ fecha | 
«/tr» 


<tr> 


<td ngNonBindable>{{ fecha | 


<td>{{ fecha | 
</tr> 
</table> 


</div> 


date 


date:'medium' | 


date:'d/M/y HH:mm:ss’ 


date | uppercase))</td> 


| uppercase))</td> 


date:'medium' | lowercase))</td> 


lowercase))</td> 


date:'d/M/y HH:mm:ss' ))</td> 


))«/td» 











{{ fecha | date | uppercase} } 
{{ fecha | date 'medium' | lowercase }} 
{{ fecha | date 'd/M/y HH-mm ss' } } 


Fri Ape 15 1988 12:30:15 GMT40200 (Hora de verano romance) 
APR 15, 1988 

ape 15, 1988, 12:30-15 pm 

15/4/1988 12-30-15 
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Eo Pipes: DecimalPipe, 
CurrencyPipe 
y PercentPipe 


En este ejercicio seguiremos analizando los pipes que Importante 
Angular incorpora. En este caso, analizaremos los pipes 
DecimalPipe, CurrencyPipe y PercentPipe. Todos ellos 
parten de un número como valor de entrada. 


DecimalPipe 


Nos permite formatear un número como texto. Se usa 
de la siguiente manera: 





number expression | number[:digitInfo] 
donde: 


e  digitInfo es una cadena de texto con el siguiente formato: 
(minIntegerDigits].[minFractionDigits]-[maxFractionDigits] 
donde: 

e  minIntegerDigits es el número mínimo de enteros que se van a usar. Por 
defecto vale 1. 

e minFractionDigits es el número mínimo de decimales que se van a usar. 
Por defecto vale 0. 

e maxFractionDigits es el número máximo de decimales que se van a usar. 
Por defecto vale 3. 


CurrencyPipe 


CurrencyPipe nos permite formatear un número como moneda. Se usa de la siguien- 
te manera: 


number expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]] 
donde: 


e currencyCode es el código de moneda ISO 4217, como USD para el dólar y 
EUR para el euro. 
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e symbolDisplay: con true visualizaremos el símbolo ($ o €), y con false el 
código (USD o EUR). 
e  digitInfo: mirar DecimalPipe para ver su descripción. 
PercentPipe 
Nos permite formatear un número como porcentaje. Se usa de la siguiente manera: 
number expression | percent[:digitInfo] 
donde: 
e  digitInfo: mirar DecimalPipe para ver su descripción. 


Vamos a ver ejemplos de estos pipes. 


1. Desde la carpeta del proyecto creado en el anterior ejercicio, creamos el 
componente. 








Ej100 angularV031 pipeDisp»ng generate component numberPipes 


LS ena $ t£ 
1\EJ100_ angulare pipebisp» 


:\EJj100_angular\031_pipcDispng generate component numberfipes 
rc/app/ramber-pipos/mabor-pipes . component -html (31 bytes) 
rc/app/rambar-pipos/mnbor-pipes.component-spoc.ts (664 bytoz) 

r rc app/mimber-pipes/number-pfpes.component.ts (292 bytes) 
reste srciapp/ramber-pipes/number-pipes.component.css (& bytes) update src/app/app.module.ts ($18 bytes) 


:WEjiee angular X831 pipetisp» 





Seguidamente abriremos el proyecto con nuestro editor Atom, y en el 
template principal de la aplicación, pondremos el siguiente código para 
que cargue nuestro nuevo componente. Desde el navegador podremos 
comprobarlo. 


src/app/app.component.html 
«app-number-pipes»«/app-number-pipes» 


J O Pipecia x WA 
€ > Ç |0 ocainostr4200 


mumber-pipes works! 





Por último, añadiremos el código en el componente. En el navegador podre- 
mos ver el resultado. 


src/app/number-pipes/number-pipes.component.ts 
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export class NumberPipesComponent implements OnInit ( 


pi: number = 3.141592; 


src/app/number-pipes/number-pipes.component.html 


<div> 


<p><b>CurrencyPipe, PercentPipe: ejemplos de uso</b></p> 





<table style-"width:100$"» 





<colgroup><col style="width: 40%><col style="width: 60%”></ 


colgroup> 

SUE 
«td ngNonBindable»((pi)]«/td» 
<td (pidas 

</tr> 

SUE 
«td ngNonBindable»((pi | currency:'EUR':false]]«/td» 
«td»((pi | currency:'EUR':false]]«/td» 

«/tr» 

SEDE 
«td ngNonBindable»[((pi | currency:'EUR':true:'4.3-3']]«/td» 
«td»((pi | currency:'EUR':true:'4.3-3'] ) «/td» 

etr 

pm 


«td ngNonBindable»((pi | percent))</td> 


«td»[((pi | percent))</td> 


</tr> 
SEES 
«td ngNonBindable»[((pi | percent:'4.3-3'))</td> 
«td»((pi | percent:'4.3-3']]«/td» 
etx 
«/table» 


«/div» 
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/ O PipeDisp mN 





é Q 0 localnosta200 





CurrencyPipe. PercentPipe: ejemplos de uso 


py) 3.141592 

{ {pi | currency EUR'-falsc}} EUR3.14 

( (pi | currency EUR':trve:"4-3:3'}7 €0,003.142 
4 {pi | percem)) 314.159% 
tni hocrcent 4339) 0.314.159% 
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(55). Pipes: Pipes 
personalizados 


Como hemos visto en anteriores capítulos, Angular 
ofrece un conjunto de pipes que permiten formatear 
los datos antes de mostrarlos al usuario. Sin embargo, 
podría pasar que este conjunto de pipes no fuera su- 
ficiente para realizar los cambios de formato que ne- 
cesitamos. Por suerte, Angular ofrece las herramientas 
necesarias para crear nuevos pipes personalizados. En 
este ejercicio veremos cómo hacerlo. 


En el ejemplo crearemos un pipe que realice una di- 
visión entera, o sea, que lleve a cabo una división y, 
como resultado, devuelva el cociente y resto como nú- 
meros enteros sin decimales. A través del operador “|” 
obtendrá el dividendo y por parámetro se le pasará el 
divisor: 


Importante 





number expression | divisionEntera:divisor 


Vamos a empezar el ejercicio: 


1. Nos ubicaremos en ej100 angular, y crearemos el proyecto tecleando ng 
new pipePers. Seguidamente lo renombraremos para que haga referencia a 
nuestro nümero de ejercicio ejecutando rename pipePers 033 pipePers, 
y finalmente pondremos en marcha la aplicación ejecutando ng serve 


desde la carpeta 033 pipePers. 


:X£j100 angular»ng new pipePers 

create pipePers/e2e/app.e2e-spec.ts (291 bytes) 
create pipePers/e2e/app.po.ts (268 bytes) 

create pipePers/e2e/tsconfig.e2e.json (235 bytes) 
create pipePers/karma.conf.js (923 bytes) 

create pipePers/package.json (1314 bytes) 

create pipePers/protractor.conf.js (722 bytes) 
create pipePers/README.md (1099 bytes) 





2. Ahora crearemos el nuevo pipe divisionEnteraPipe. Para ello ejecutaremos 


lo siguiente: 








Ej100 angularV033 pipePers»ng generate pipe divisionEntera 
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-:163100_angularW633_pipePers>ng generate pipe divisionEntera 
create src/app/division-entera.pipe.spec.ts (228 bytes) 
create src/app/division-entera.pipe.ts (217 bytes) 
update src/app/app.module.ts (399 bytes) 


;MEj100 angularVe33 pipePers?, 





La anterior ejecución habrá creado los archivos necesarios para el nuevo 
pipe y añadido una referencia en app.module.tst para que pueda usarse 
desde cualquier template, aunque, de momento, sin realizar ningün tipo de 
transformación. Para que se lleve a cabo, tendremos que implementar el có- 
digo necesario. El desarrollo se realizará íntegramente en el archivo divi- 
sion-entera.pipe.ts. Este archivo lo encontraremos así: 


src/app/division-entera.pipe.ts 


import ( Pipe, PipeTransform ) from '*Rangular/core'; 


GPipe (1 





name: "'divisionEntera"' 


) 








export class DivisionEnteraPipe implements PipeTransform { 


transform(value: any, args?: any): any { 


return mill. 





De forma resumida, podemos definir un pipe como una clase "decorada" 
con metadatos de pipe. La implementación de cualquier pipe personalizado 
tiene los siguientes requerimientos: 


e [a clase del pipe debe implementar el método transform de la interface 
PipeTransform. Este método toma el valor que “canaliza” y un número 
variable de parámetros de cualquier tipo, y devuelve un valor transformado. 

e Debe usarse el decorador (Pipe para que Angular sepa que es un pipe. En el 
decorador, indicaremos el nombre del pipe. Este será el que deberemos usar 
desde los templates para usarlo. 


Una vez analizado el código que se ha generado, seguiremos con la implementación. 


3. Añadiremos el siguiente código, que definirá la funcionalidad de nuestro pipe: 
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src/app/division-entera.pipe.ts 


transform(value: number, divisor: string): string { 


let div = parseFloat (divisor); 


let cociente = Math.floor (value/div); 


9 


Ht resto = value $ div; 








turn "Cociente: " + cociente + " $ Resto: " + resto; 





Finalmente, para probar el pipe, afiadiremos el siguiente código. Desde el 
navegador podremos probar nuestro nuevo pipe modificando los valores de 
dividendo y divisor. 


src/app/app.component.ts 


export class AppComponent ( 
dividendo = 10; 


divisor = 2; 


src/app/app.component.html 





<p><b>Pipes personalizados: divisionEnteraPipe</b></p> 


<div>Dividendo: <input [(ngModel)]="dividendo”></div> 





<div>Divisor: <input [(ngModel)]-"divisor"»«/div» 





<p> Resultado: [(dividendo | divisionEntera: divisor))</p> 


src/app/app.module.ts 


import ( FormsModule ) from '“fangular/forms'; 


fNgModule ({ 
declarations: [.], 


imports: [..,FormsModule],.. 
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/ O rpees Ne 
€ > G 10 localhost:4230 











Pipes personalizados: divisonEnteraPipe 


Dividendo: 10 
Divisor: |2 


Resultado: Cociente: 5 2 Resto: 0 








/" Pperes x TA 
€ > Q |Q localhost:42)0 














Pipes personalizados: divisonEnteraPipe 


Dividendo: 17] 


Divisor: 2 








Resultado: Cociente: 8 2 Resto: 1 
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Eo Pipes: Puros e impuros 


Existen dos categorías de pipes: puros e impuros. La principal diferencia entre 
ellos radica en la manera que tiene Angular de gestionar su ejecución. 


En este sentido, Angular ejecutará un pipe puro cuando detecte cambios en la va- 
riable de entrada, o sea, un cambio de valor si la variable es de tipo primitivo (string, 
number, boolean, symbol), o un cambio de referencia si la variable es una referencia 
a un objeto (date, array, function, object). Por lo tanto, Angular no ejecutaría un 
pipe de este tipo si, por ejemplo, la variable de entrada fuera de tipo array y le hu- 
biéramos añadido un elemento. 


Por el contrario, Angular ejecutará un pipe impuro en cada ciclo de detección de 
cambios (al interaccionar con cualquier elemento de la aplicación) sin importar si 
ha habido cambios o no en la variable de entrada o parámetros del pipe. 


Todos los pipe que habíamos visto hasta ahora eran de tipo puro. De hecho, todo 
pipe es puro por defecto. Si queremos crear un pipe impuro, deberíamos indicar- 
lo de la siguiente manera: 


QPipe(( 


name: *'.' 


pure: false 


)) 


Aunque usar pipes impuros puede parecer más ventajoso, el hecho es que su uso re- 
quiere el consumo de muchos más recursos que pueden ralentizar la aplicación. Por 
tanto, siempre es preferible usar pipes puros. 


Vamos a realizar un ejercicio que nos ayudará a entender estas diferencias. Creare- 
mos un nuevo pipe, numElem, que devolverá el número de elementos de un array. 
Usaremos este pipe en un contador que nos indicará el número de elementos de un 
array al cual podremos añadir elementos desde la misma aplicación. 
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1. Nos ubicaremos en ej100 angular y crearemos el proyecto tecleando 
ng new pipePurosimpuros. Seguidamente lo renombraremos para 
que haga referencia a nuestro número de ejercicio ejecutando rename 
pipePurosImpuros 034 pipePurosImpuros, y finalmente pondremos 
en marcha la aplicación ejecutando ng serve desde la carpeta 034. 
pipePurosImpuros. 


iem angular»ng new pipePuros Impuros 
te pipePurosImpuros/e2e/app.e2e-spec.ts (300 bytes) 


create pipePurosImpuros/e2e/app.po.ts (288 bytes) 

create pipePurosImpuros/e2e/tsconfig.e2e.json (235 bytes) 
create pipePurosImpuros/karma.conf.js (923 bytes) 

create pipePurosImpuros/package.json (1323 bytes) 

create pipePurosImpuros/protractor.conf.js (722 bytes) 





2. Seguidamente crearemos el pipe numElem. Para ello, ejecutaremos el 
siguiente comando: 








| c: 23100 angularV034 pipePurosImpuros»ng generate pipe numElem | 





2: VEj196 angulari634 pipePurosImpuros»ng generate pipe numklem 
create src/app/num-elem.pipe.spec.ts (192 bytes) 
create src/app/num-elem.pipe.ts (203 bytes) 
update src/app/app.module.ts (378 bytes) 


*XEj100 angulari824 pipePurosImpuros», 





y en el archivo num-elem.pipe.ts, añadimos el siguiente código en la fun- 
ción transform(...). 


src/app/num-elem.pipe.ts 


transform(cadena: any[]): number ( 


return cadena.length; 





El resto de código de la aplicación sería el siguiente: 





src/app/app.component.ts 


export class AppComponent { 


fechas: Date[] = Il; 


anadirFecha() this.fechas.push(new Date()); 
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src/app/app.component.html 


<p><b>Pipes: Puros e Impuros</b></p> 


<p>Contador: ((fechas | numElem)) </p> 


<button (click)="anadirFecha ()”>Añadir fecha</button> 
<div *ngFor="let fecha of (fechas)”> 


<p>([ (fecha | date:'medium'” ))</p> 





</div> 


Al probar la aplicación desde el navegador, veremos 

que el contador no se actualiza al pulsar “Añadir fe- 
cha”. El motivo es el comentado al principio del ejer- 
cicio: el pipe es puro, y como Angular no detecta cam- 
bios en la referencia del array de fechas, cuando se aña- 
den nuevas fechas no ejecuta el pipe y el contador no 


se actualiza. 


PO Piperurestmpuros NON 


€ > C [O tecamostczon 














Pipes: Puros e Impures 
Contador: 0 


Sep 11, 2017, 8:39:11 AM 
Sep 11. 2017, 8:39:11 AM 
Sep 11, 2017, 8:39.12 AM 





Como podrá ver a continuación, podemos solucionar el problema de dos maneras 
distintas. Aunque la opción preferible será la de declarar el pipe numElem como im- 
puro (opción b) Al hacerlo vemos que el contador ya funciona. 


€e >C [D localnost 4200 Bj Ye H 








Sep 11, 2017, 8:40:38 AM 


Sep 11, 2017, 8:40:39 AM 
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a. Crear un nuevo array de fechas con la nueva fecha añadida, y asignarla a la 
original. 





src/app/app.component.ts 


fechas: Date[] 


anadirFecha() { 


this.fechas.push(new Date()); 


let fechas2 = this.fechas.slice(); 


this.fechas = fechas2; 





b. Declarar el pipe como impuro. 


src/app/num-elem.pipe.ts 


GPipe (1 


name: 'numElem', 


pure: false 


)) 
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AsyncPipe es un tipo de pipe impuro. Su característi- 
ca principal es que acepta objetos Promise u Obser- 
vable como objetos de entrada. En el mundo de las 
aplicaciones web, la velocidad es esencial, por lo que el 
uso de programación asíncrona para aprovechar el 
tiempo y evitar esperas innecesarias es imprescindible. 
Promise y Observable son dos de las principales herra- 
mientas que tenemos para gestionar este tipo de pro- 
gramación. Consulte los capítulos 51, 52 y 53 para más 
información. 


En este ejercicio veremos como AsyncPipe nos facilita 
el uso de estas herramientas. Crearemos una aplicación 
primero sin usar AsyncPipe y luego empleándolo. La 
aplicación pondrá en marcha dos temporizadores de 2 
y 4 segundos, respectivamente. Al terminar, cada uno 
de ellos devolverá un texto que acabaremos visualizan- 


Eo Pipes: AsyncPipe 


Importante 





do por el template. El primer temporizador será controlado mediante Promise y el 


segundo mediante Observable. 


1. Nos ubicaremos en ej100 angular, y crearemos el proyecto tecleando 
ng new pipeAsyncPipe. Seguidamente lo renombraremos para que 
haga referencia a nuestro número de ejercicio ejecutando rename 
pipeAsyncPipe 035_pipeAsyncPipe, y finalmente pondremos en marcha 
la aplicación ejecutando ng serve desde la carpeta 035_pipeAsyncPipe. 


:XEj100 angular»ng new pipeAsyncPipe 

create pipeAsyncPipe/e2e/app.e2e-spec.ts (297 bytes) 
create pipeAsyncPipe/eze/app.po.ts (208 bytes) 

create pipeAsyncPipe/e2e/tsconfig.e2e.json (235 bytes) 


create pipeAsyncPipe/karma.conf.js (923 bytes) 
create pipeAsyncPipe/package.json (1320 bytes) 
create pipeAsyncPipe/protractor.conf.js (722 bytes) 
create SINS md d (HN bytes) 

Create ij gula 11. 





2. Seguidamente añadiremos el código del ejemplo. En esta primera versión no 


usaremos AsyncPipe. 
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src/app/app.component.ts 


import ( Observable ) from "rxjs/Observable'; 


import ( Subseription | from "rxjs/Subscription"; 


QComponent ((..) ) 

export class AppComponent { 
promiseData:string; 
observableData:string; 


observableSubs: Subscription = null; 


getPromise()( 
return new Promise<string>(function(resolve, reject) 


setTimeout(() => (resolve("Timerl finalizado”);), 2000); 


getObservable() { 
return new Observable«string» (observer => { 


setTimeout(() => [(observer.next (“Timer2 finalizado");), 4000); 


construetor() 1 





this.getPromise().then( v => this.promiseData = v ); 
this.observableSubs = this.getObservable() 


.subscribe( v => this.observableData = 





ngOnDestroy()( if (this.observableSubs) this.observableSubs. 


unsubscribe(); 
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src/app/app.component.html 


<h2>Pipes: AsyncPipe</h2> 


<p>PromiseData: (([ promiseData ))</p> 





«p»ObservableData: {{ observableData ))</p> 


Una vez añadido el código, podremos comprobar su funcionamiento en el 
navegador. Por pantalla veremos el texto devuelto por los temporizadores a 
medida que terminen. La secuencia sería la que aparece en las imágenes. 


Recargando la página con F5, podremos reactivar los temporizadores. 





€ > e[oomenm 0) 


Pipes: AsyncPipe 
PromiseData: 


ObservabicData: 


€» c [O localhost:4200 yx : 


Pipes: AsyncPipe 
PromiseData: Timer] finalizado 
ObservableData- 


O PipeisyncPipe x WV 


€ > Q |Q localhost:4200 E f| 





Pipes: AsyncPipe 


PromiseData: Timer] finalizado 
ObscrvabicData: Timer2 finalizado 





3. Seguidamente modificaremos el código para que se haga uso de AsyncPipe. 


src/app/app.component.ts 
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export class AppComponent { 
promiseObj: Promise<string>; 


observableObj: Observable<string>; 


getPromise () {...} 


getObservable() (..) 


constructor () { 
this.promiseObj = this.getPromise(); 


this.observableObj = this.getObservable(); 


src/app/app.component.html 


<h2>Pipes: AsyncPipe</h2> 
<p>PromiseData: (( promiseObj | async ))</p> 


<p>ObservableData: {{ observableObj| async ))</p> 





Como podemos observar, a AsyncPipe le podemos pasar directamente los 
objetos Promise y Observable, por lo que ya no es necesario extraer los valo- 
res que devuelven y exponerlos en variables para que puedan ser mostrados 
en el template mediante interpolación (data binding). Por otra parte, tam- 
poco hace falta hacer el “subscribe” y “unsubscribe” al objeto Observable. 
AsyncPipe se encarga de hacerlo por nosotros. 
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leo Pipes: JsonPipe 


JsonPipe es otro pipe de tipo impuro. Convierte un objeto a cadena JSON. Se usa de 
la siguiente manera: 


expression | json 


JsonPipe se usa en multitudes de situaciones, sin em- 
5d Importante 
bargo, cabe destacar su uso en procesos de depuración 


de código, ya que permite analizar el contenido de 
cualquier objeto para comprender el comportamiento 
del código y buscar posibles errores. 


En este ejercicio crearemos una aplicación que nos 
ayudará a entender el funcionamiento de JsonPipe. La 
aplicación tendrá dos clases, Libro y Escritor, a par- 
tir de las cuales se crearán diversos objetos. Luego, la 





misma aplicación mostrará por el navegador el conte- 
nido de todos estos objetos usando JsonPipe. 


L 


Primero de todo nos ubicaremos en ej100 angular, y crearemos el proyecto 
tecleando ng new pipeJsonPipe. Seguidamente lo renombraremos para 
que haga referencia a nuestro nümero de ejercicio ejecutando rename 
pipeJsonPipe 036 pipeJsonPipe, y finalmente pondremos en marcha la 
aplicación ejecutando ng serve desde la carpeta 036 pipeJsonPipe. 


:X£j100 angular» 

:XFj1e0 angular» 

;:XFj100 angular»ng new pipeJsonPipe 

create pipeJsonPipe/e2e/app.e2e-spec.ts (296 bytes) 
create pipeJsonPipe/e2e/app.po.ts (208 bytes) 

create pipeJsonPipe/e2e/tsconfig.e2e.json (235 bytes) 


creste pipeJsonPipe/karma.conf.js (923 bytes) 
pipeJsonPipe/package.json (1319 bytes) 
pipeJsonPipe/protractor.comt.js (722 bytes) 

create plpeJsonPipe/RFADME.md (1103 bytes) 

create pipeJSonPipe/tsconfig.json (363 bytes) 

create pipeJsonPipe/tslínt.json (3048 bytes) 





Ahora abriremos el proyecto con Atom, y crearemos las clases Libro y 
Escritor. Para ello, nos situaremos sobre la carpeta app, pulsaremos botón 
derecho, y seleccionaremos "New File". La clase Libro la crearemos como 
“libro.ts” y la clase Escritor como "escritor.ts". 
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"v EE 036 pipelsonPipe 


> Hg e2e 
> S node modules 
v EN src 


Search in Directory 


New File 


New Folder 


Rename 
Duplicate 
Delete 


Copy 





3. Una vez creados los ficheros de las clases, añadiremos su código: 


src/app/libro.ts 


export class Libro { 
constructor (public titulo:string, public tematica:string) { 


) 


src/app/escritor.ts 


import (Libro) from *./libro”; 





export class Escritor ( 


constructor (public id:number, public nombre:string, public 


fecha:Date, public libros:Libro[1) ( 


} 





Seguidamente crearemos los objetos en el componente. Para ello, añadire- 
mos el siguiente código: 


El gran libro de Angular 145 





src/app/app.component.ts 


import (Escritor) from *./escritor'; 





import (Libro) from V'./libro'; 


fComponent (1... )) 


export class AppComponent { 


Librot: Libro Libro ('Mucho ruido y pocas nueces”, '“Comedia'); 





libro2: Libro new Libro('Romeo y Julieta”, "Drama'); 


librosArray: Libro[] =- [this.librol, t£his.libro2]; 


escritor - new Escritor (1, "William Shakespeare', new Date(1564, 


23, 26), this.librosArfray); 





Y, finalmente, afiadiremos el código en el template que nos permitirá visua- 
lizar el contenido de todos esos objetos. Usaremos JsonPipe para visualizar 
el contenido de un objeto (Libro), de un array de objetos (Libros) y de un 
objeto de objetos (Escritor). 


src/app/app.component.html 


<h2>Pipes: JsonPipe</h2> 


<b ngNonBindable>JsonPipe sobre un libro (objeto): (f(flibrol | 
Jjson))</b> 


<pre> ((librol | json)) </pre> 


<b ngNonBindable>JsonPipe sobre el array de libros (array de 
objetos)): ((librosArray | json]) o (([escritor.libros | Json))</ 


b» 
<pre>[([escritor.libros | json]]«/pre» 


<b ngNonBindable>JsonPipe sobre escritor (objeto de objetos): 


((escritor | json]])«/b» 


<pre>{ {escritor | json))</pre> 
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En el anterior código, cabe destacar el uso de la directiva ngNonBindable. 
Esta directiva le indica a Angular que no compile el contenido del tag. Esto 
nos permite mostrar por pantalla el literal “((...))” sin que sea procesado por 
Angular. Por otra parte, hay que destacar el uso del tag «pre», que nos per- 
mite visualizar la cadena JSON con saltos de línea para facilitar su análisis. 


4. Desde el navegador podremos ver el resultado de todo el código anterior 


[^] PipelsonPipe x 


€ C 10 localhost:4200 


Pipes: JsonPipe 


JsonPipe sobre un libro (objeto): [flibrol | json}} 
t 
titulo": “mucho ruido y pocas nueces”, 
"tematica": "Comedia" 
JsonPipe sobre el array de libros (array de objetos)): 
[[hbrosArray | json}} o [fescritor.libros | json}} 


[ 


"titulo": "Mucho ruido y poces nueces”, 
"tematica"; "Comedie" 


L 
1 


"titulo": "Romeo y Julieto", 
"tematica"; "Droma" 


J 
] 


JsonPipe sobre escritor (objeto de objetos): [escritor | jsonjj 


e E E 

"nombre"; "williem Shakespeare”, 
"fecha"; "1564-04-25722:00:08.0007", 
"libros": [ 


"titulo": "Mucho ruida y pocas nueces", 
"tematica": "Comedia" 

Lh 
"titulo": "Romeo y Julieta", 
"tematica": "Drama" 
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(parte I) 


Tal como habíamos visto en el capítulo “005 TypeS- 
cript. Introducción...", el lenguaje de programación 
TypeScript nos permite realizar una programación 
JavaScript orientada a objetos con código simple y 
limpio. Esto significa que podremos aplicar una pro- 
gramación orientada a objetos en nuestras aplicaciones 
Angular y aprovecharnos de todas la ventajas que esto 
supone. 


De forma resumida podríamos definir la programa- 
ción orientada a objetos como un método de im- 
plementación en el que los programas se organizan 
como colecciones cooperativas de objetos, cada uno 
de los cuales representan una instancia de alguna cla- 
se. Las clases representan entidades o conceptos. Cada 
una de ellas es un modelo que define un conjunto de 
variables y métodos. Además, todas ellas son miembros 
de una jerarquía de clases unidas mediante relaciones 
de herencia. 


¿Ez Modelos de datos y mock 
data (datos simulados) 


Importante 





Object 
Oniented 


Programming 


Algunas de las ventajas de la programación orientada a objetos son: 


e Reusabilidad. El diseño adecuado de las clases permite que se puedan usar 
en distintas partes del programa y en otros proyectos. 

e Mantenimiento. Los programas orientados a objetos son más sencillos 
de leer y comprender, ya que permiten ocultar detalles de implementación 
dejando visibles solo aquellos detalles más relevantes. Todo esto facilita el 
trabajo de realizar modificaciones y detectar posibles problemas. 

e Fiabilidad. Al dividir el problema en partes más pequeñas permite que 
podamos probarlas de manera independiente y aislar fácilmente los posibles 


errores que puedan surgir. 


En este ejercicio veremos cómo enfocar un programa Angular a la programación 


orientada a objetos trabajando con modelos de datos. 


Primero crearemos una aplicación Angular con un único componente Biblioteca 
que visualizará el contenido de una variable interna de tipo array con distintos ele- 


mentos que serían los libros. 
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En la segunda parte de este ejercicio modificaremos la aplicación creando el modelo 
de datos Libro, reestructurando el código y el mock data (datos simulados), y co- 
mentando las ventajas de esos cambios. 


1. 


En primer lugar, nos ubicaremos en Ej100 angular y crearemos el 
proyecto tecleando ng new dataModels. Seguidamente lo renombraremos 
para que haga referencia a nuestro número de ejercicio, ejecutando rename 
dataModels 037_dataModels y, finalmente, pondremos en marcha la 
aplicación ejecutando ng serve desde la carpeta 037 dataModels. 


2: VE j100 angular»ng new dataModels 
reste dataModels/e2e/app.e?e-spec.ts (293 bytes) 
reste daraModels/e2e/app.po.ts (268 bytes) 
reat 


e dataModels/e2e/tscoatíg.e2e.]son (235 bytes) 
reste dataModels/karma.coaf.js (923 bytes) 
te dataModels/package.json (1316 bytes) 
dataModels/protractor.conf.js (722 bytes) 
dataModels/README.md (1101 bytes) 
dataModels/tscomfig.json (303 bytes) 
sate dataModolz/tclimt.jcon (3948 bytes) 
aate dataModolz/.angular-cli.jzon (1129 bytes) 
este dataModels/.editorconfig (245 bytes) 





Ahora crearemos el componente biblioteca mediante el comando 
siguiente: 





Ej100 angularV037 dataModels»ng generate component biblioteca 


:1£j108 angularAe37 dataModels»ng generate component biblioteca 
create src/app/biblioteca/biblioteca.component.html (29 bytes) 
create src/app/biblioteca/biblioteca.component.spec.ts (656 bytes) 
create src/app/biblioteca/biblioteca.component.ts (285 bytes) 
create src/app/biblioteca/biblioteca.component.css (0 bytes) 
update src/app/app.module.ts (412 bytes) 


:1Ej100_angular1637_dataModels>,, 





Seguidamente abriremos el proyecto con Atom y editaremos el componente 
biblioteca añadiendo la variable con los libros: 


src/app/biblioteca/biblioteca.component.ts 


export class BibliotecaComponent implements OnInit ( 


libros = [{ 
“id”: 1; 
"titulo": "EI Quijote", 





"autor": "Cervantes" 


{ 
és 


“titulo”: “Hamlet”, 


“autor”: “Shakespeare” 


)]; 





El siguiente paso será modificar el template del componente biblioteca para 
visualizar el contenido de la variable anterior. Para ello abriremos biblio- 
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teca.component.html y sustituiremos todo el código que tenga por el 
siguiente: 





src/app/biblioteca/biblioteca.component.html 


«ul» 
«li *ngFor-"let libro of libros”> 
<h2>[(libro.titulo | uppercase))</h2> 
<p class="description”>((libro.autor))</p> 
</li> 
</ul> 





En este código aparecen ciertos elementos de Angular como son las directi- 
vas (“*ngFor”) y los pipes (*“...libro.titulo | uppercase...”). Para más informa- 
ción, consulte los capítulos dedicados a las directivas y a los pipes. 


3. Finalmente, solo faltará que nuestra aplicación cargue el componente 
biblioteca en la página principal. Para ello, simplemente añadiremos la 
referencia a nuestro componente en el template del componente principal 
de la aplicación: app.component.html. Sustituiremos su contenido por el 
siguiente: 


<app-biblioteca></app-biblioteca> 


4. En este punto, desde el navegador (http://localhost:4200) ya podremos 
ver que nuestra aplicación muestra los libros de la biblioteca. 





JU PatatMadels 


€ > C | D localhost:4200 





Biblioteca: 


: EL QUIJOTE 


Cervantes 


* HAMLET 


Shakespcarc 
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E: Modelos de datos y mock 
data (datos simulados) 
(parte II) 


Vamos a continuar con la aplicación que habíamos 
creado en el anterior ejercicio. 


Importante 


En este ejercicio crearemos el modelo de datos Li- 
bro añadiendo las modificaciones necesarias, reestruc- 
turando el código y mock data (datos simulados), 
comentando las ventajas de esos cambios. 


]. En primer lugar, abriremos el proyecto 037. 
dataModels con el editor (Atom) y pondremos 
en marcha la aplicación ejecutando ng serve 
desde línea de comandos y dentro de la carpeta 
037 dataModels. 





2. Ahora crearemos el modelo de datos Libro. — 


B E va Models 
Desde el editor Atom nos situaremos en la VM 


> Nn ce 


carpeta app, pulsaremos el botón derecho del c — 
ratón, seleccionaremos New File, y crearemos el vae 
fichero con el nombre libro.model.ts. Dentro ^ peus 

E . . . ? biblioteca 
del nuevo fichero afiadiremos el siguiente sn 
código: Aper 


Ais appcomponent.spec.ts 
app eomponentts 
appamodule.ts 
E bro modetis 

> Bg assets 


src/app/libro.model.ts 


export class Libro 


id: number; 


titulo: string; 


? gg environment 
li] fovicon.ico 
index.html 


autor: string; 





Como vemos, un modelo de datos básicamente es una clase en JavaScript. 


También podemos observar cómo, gracias a TypeScript, podemos definir 
el tipo (number, string, etc.) de cada una de las distintas propiedades del 
modelo. Esto permitirá al compilador validar nuestro código y asegurarse de 
que usamos esas propiedades de manera adecuada. 


3. Acontinuación, modificaremos el componente biblioteca para que haga uso 
del nuevo modelo de datos Libro. El cambio será muy sencillo, simplemente 
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añadiremos la referencia al modelo de datos Libro, y le diremos a TypeScript 
que trate la variable libros como una cadena de Libros: 





src/app/biblioteca/biblioteca.component.ts 


import { Component, Onlnit j from "àangular/core'; 


import ( Libro } from *../libro.model'; 


export class BibliotecaComponent implements OnInit { 


libros: Libro[] = [t 
"wig: Ty 
“titulo”: “El Quijote”, 





Como hemos comentado en el punto anterior, al definir un tipo para la va- 
riable libros (en este caso, cadena de Libros), el compilador es capaz de va- 
lidar que se esté usando esta variable de forma correcta. Si, por ejemplo, 
modificáramos la propiedad “titulo” por “nombre”, de alguno de los libros 
el compilador daría error. 


libros: Libro[] = 
as cm 


"nombre": 


M 





El Quijote”, 


ERROR in C:/EJ168_angular/B37_dataModels/src/app/bibliotecafbiblioteca.component.ts (19,3): T 
ype *(£ “id”; number; “nombre”: string; "autor": string; } | 4 “id”: mumber; “título”: string 
5 “autor”...' is not assignable to type 'Libro(]'. 
Type '( ^id": number; "nombre": string; "autor": string; ) | ( "id": number; "titulo": stri 
; "autor":..,' is not assignable to type 'Libro”, 
Type *[ "id"; number; "nombre": string; “autor”; string; )' is not assignable to type "Li 


Object literal may only specify known properties, and '"noabro*' doos not exist in type 
"Libro". 


pack- Failed to compile. 





4. Desde el navegador (http://localhost:4200) podremos verificar que todo 
funciona. 


/ y DstaModels NC! 


€ 5 (10 localhost:4200 
Biblioteca: 
: EL QUIJOTE 
Cervantes 


* HAMLET 


Shakespeare 
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Normalmente, una aplicación Angular haría una llamada a un web service (API) 
para obtener los datos que necesita que, en el caso de nuestra aplicación, serían los 
libros. Por lo tanto, es una buena práctica quitar los datos de prueba (o mock 
data) de nuestros modelos y componentes y dejarlos en ficheros aparte. Si- 
guiendo esta recomendación, vamos a realizar cambios en nuestra aplicación. 


5. Desde el editor Atom, nos situaremos en la ANA 
carpeta app, pulsaremos el botón derecho del Project 
ratón, seleccionaremos New File, y crearemos  J im ox deteModess 
el fichero mocks.ts. Dentro, añadiremos lo > Mee 
siguiente: > (8) node_mocues 

" E src 

~ BE opp 
> lg biblioteca 





src/app/mocks.ts 


3 appcomponentcss 


Bg app.componenthtmi 
E LIBROS: Libro[] 


Hs 


Les app.componentspec.ts 
appcomponentts 





tulo”: SEL Quijote”, BB app.moduleíts 


NN libro.model.ts 
1 

o 25 

“titulo”: “Hamlet”, 





tor”: “Cervantes” 





"actor": "Shakespeare" 


)]1; 





6. Finalmente modificaremos el componente biblioteca para que cargue los 
datos mock desde ese fichero: 


src/app/biblioteca/biblioteca.component.ts 





dangular/core”; 
Libro ) from "'../libro.model'; 
LIBROS } from "'../mocks'; 





export class BibliotecaComponent implements OnInit ( 


libros: Libro[]; 


ngOnInit() ( 


this.libros = LIBROS; 
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7. Desde el navegador (http://localhost:4200) podremos verificar que todo 
funciona bien. 











"$ Datalodels x^ 





E G | O localhost 4200 








Biblioteca: 
- EL QUIJOTE 
Cervantes 
* HAMLET 


Shakespeare 
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e Librerías. Enumeración 
de librerías 





Al igual que en otros lenguajes, las librerías, entre otras 


muchas ventajas, nos permiten organizar el código y Importante 


reutilizarlo en otras aplicaciones. En este sentido, An- 
gular utiliza un conjunto de librerías “de serie” que 
aportan funcionalidad en diferentes aspectos como ve- 
remos a continuación, pero, además, facilita el uso de 
otras librerías de terceros que pueden aportarnos solu- 
ciones que simplemente hemos de importar y utilizar. 

Las librerías más importantes de Angular y su cometi- 


do son las siguientes: 





c angular/animations Permite realizar animaciones similares a las 
realizadas con CSS (efectos, transiciones entre 
páginas, etc.) integrando la lógica de animación 
con el resto de códigos de la aplicación. 

c angular/cli Permite trabajar con Angular-CLIinicializando, 
desarrollando y manteniendo aplicaciones 
Angular a partir de la creación de componentes, 
directivas, etc. 


@angular/common Proporciona directivas, pipes y servicios 
comúnmente utilizados. 


@angular/compiler Librería del compilador que permite convertir 
nuestro código y nuestras plantillas antes de 
ejecutar y representar la aplicación. 


Cangular/compiler cli Librería del compilador para Node.js invocada por 
los comandos build y serve de Angular CLI. 

Cangular/core Esel principal repositorio defuentesde Angular. 
Incluye todos los decoradores de metadatos, 
componentes, directivas, inyección de 


dependencia, etc. Imprescindibles para la 
creación de aplicaciones. 
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(C angular/forms Proporciona directivas y servicios para crear 
forms tanto template-driven como reactive- 
driven (vistos más adelante). 


Gangular/http 


COangular/language-service | Permite analizar las plantillas de los 
componentes proporcionando sugerencias, 
chequeo de sintaxis, chequeo de errores, etc., 
detectando automáticamente el tipo de archivo 
tratado. 


COangular/platform- Librería usada para navegadores web que 

browser ayuda a procesar el DOM e incluye el método 
bootstrapStatic() para arranque de aplicaciones 
precompiladas con AOT. 

COangular/platform- Librería usada para navegadores web que incluye 

browser-dynamic proveedores y métodos para compilar y ejecutar la 
aplicación en el cliente utilizando el compilador 
JIT y que contiene el código del lado del cliente 
procesando las plantillas (enlaces, componentes, 
etc.), además de la inyección de dependencia 
reflexiva. 


Cangular/router Librería que permite navegar entre páginas de 
la aplicación al cambiar el URL del navegador. 





A lo largo del libro, tendremos la oportunidad de trabajar con diversas librerías. En 
este ejercicio, vamos a realizar un ejemplo sencillo del uso de animaciones como ex- 
cusa para utilizar la librería de e&angular/animations. 


1. En primer lugar, nos ubicaremos en ej100 angular y crearemos el proyecto 
libAnima mediante el comando ng new: 


C:VEj100 angular»ng new libAnima 







:\>cd Ej100 angular 





:\Ej100_angular>ng new libAnima 
create libAnima/e2e/app.e2e-spec.ts (291 bytes) 
create libAnima/e2e/app.po.ts (208 bytes) 

create libAnima/e2e/tsconfig.e2e.json (235 bytes) 
create libAnima/karma.conf.js (923 bytes) 

create libAnima/package.json (1314 bytes) 

create libAnima/protractor.conf.js (722 bytes) 
create libAnima/README.md (1024 bytes) 

create libAnima/tsconfig.json (363 bytes) 

create libanima/tslint.json (2985 bytes) 
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Seguidamente, renombraremos el proyecto para que haga referencia a nues- 
tro número de ejercicio. Para ello, estando ubicados en el directorio Ej100_ 
angular, escribiremos lo siguiente: 








C:1Ej100_angular>rename libAnima 039 libAnima 


A continuación, nos ubicaremos en 039 libAnima y arrancaremos la apli- 
cación para comprobar cómo funciona en nuestro navegador. Para ello, te- 
clearemos lo siguiente: gx 


Qo A2 "A 
€ C Ó Gres Aat F eMe O 1 


e Ores mente 


C:1Ej100_angular>cd 039 libAnima 


Welcome to app! 


C:1Ej100_angular1039_libAnima>ng serve 


NES angulari939_libnisomg serve 
6 Live Development Servar 5 iict ng un localho 4288, open sor un http localhost:4108/ ** 
i« | building modulos 5/5 modules 6 activsuebpack : wait until bando "Tinichod: Date: 2617-11-23119:16:34.6072 


tank [ialine) ialine.bewdle.js, inline.bundle.]s.wup (inline) 5.83 AS [ontry] [rendered] 
tank (main) mais bundle.js, waic.bundle.js.map (main) 9.14 ke (vendor) [initial] [rendered] 

tunk [polyfills) polyfills.bumdle.j5, polyfills.bundle.js.wep (polyfills) 200 kn (inline) [initial] [rendered] 
bunk [stylos] stylos.bundlo.js, styles.bundle.js..ap (styles) 11.4 48 {inline} [initial] [reedered] 

nk {vendor} resdor beadle. js, vendor. bundle js sp (vendor) 2.58 Me [initial] [resdered] 


Merce are some Woks to help you start: 
+» Tour of Heroes 
+ CLI Documentarión 
» Angular biog 


bpack: Compiled successfully. 





Ahora, abrimos el proyecto con nuestro editor (en nuestro caso, usamos 
Atom) y modificamos el archivo app.component.html para que incluya 
un div denominado caja, el evento click que llame a la función cambioEs- 
tado( y un trigger asociado a la variable estado. 
<div class-"container"» 
<h1>(f[title))</h1> 
«div class="container" id="caja” 
(click)="cambioEstado()" 
[Mestado]="estado"> 
<h2>JAG</h2> 
</div> 
</div> 





2. Seguidamente, modificaremos el archivo app.module.ts para importar el 
módulo BrowserAnimationsModule. 


import ( BrowserModule ) from "Ggengular/platform-browser'; 
import ( NgModule ) from 'gangular/core'; 


import ( BrowserAnimationsModule ) 
from 'fangular/platform-browser/animations'; 
import ( AppComponent ) from './app.component'; 


fiNgModule(( 


declarations: [ 


AppComponent 


L 
imports: [ 
— 
l. 
providers: [], 
bootstrap: [AppComponent ] 
n 
export class AppModule ( ) 
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3. A continuación, modificaremos el archivo app.component.ts para 
importar las siguientes funciones contenidas en la librería COangular/ 
animations: 





import ( trigger, state, style, animate, transition } from 'Q 





angular/animations'; 


Por otra parte, definiremos un trigger denominado estado que con- 
templa dos estados: activo e inactivo. Por tanto, modificaremos el de- 
corador Component para definir la animación y la clase AppCompo- 
nent para poner el título”'039 libAnima”, definir la variable estado 
y definir la función cambioEstado() que permita alternar el valor de 
la variable estado entre los valores activo e inactivo. Como puede ob- 
servarse, cada estado define un color de fondo, un color para el texto 
y una escala (p. ej., scale(1)) además de un efecto en la transición 
entre estados (ease-in, ease-out ) que se realiza durante un tiempo 
determinado (1.000 ms). 


(AComponent ( ( 
selector: 'app-root', 
templateUrl: './app.component.html', 
animations: [ 
trigger('estado', [ 
state('inactivo', style(( 
backgroundColor: '4FFFF00', 
transform: 'scale(1)', 
color: 'blue' 
np) 
state('activo',  style(( 
backgroundColor: '$013ADF', 
transform: 'scale(2.98)', 
color: 'white' 


H) 
transition('inactivo => activo', animate('1000ms ease-in')), 
transition('activo => inactivo', animate('1000ms ease-out')) 
1) 
] 
}) 


export class AppComponent { 
title = '039 libAnima'; 
estado:string='inactivo'; 
cambioEstado()[ 
this.estado - ( this.estado -- "activo" ) ? 'inactivo' : 'activo'; 
} 
} 





4. Por último, definiremos los estilos que usará nuestro div modificando el 
fichero styles.css. 
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caja 4 
width: 50px; 
height: 50px; 
margin: 40px; 


padding:15px; 


display: block; 
text-align: center; 
border-style: double; 
border-radius: 20px; 





5. Guárdelo todo y abra su navegador para teclear el URL http://localhost:4200/ 
y comprobar el resultado. 


€ > Q (Y|Otoshost4, A r| F a i 


| , Ofrot marcadores 





039 libAnima 





6. Haga clic sobre el div y observe cómo cambia de tamaño y color. 


€ > ec0[0cms a & F ai i 


, Orat marcadores 


039 libAnima 
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0. One Way Data Binding 
(hacia el DOM): 
Interpolación, Property 

Binding y Class Binding 
Cuando un navegador web carga un documento (vis- 


ta) genera una estructura de objetos que llamamos mporiante 


DOM. El DOM puede alterarse mediante JavaScript 
para cambiar dinámicamente los contenidos y el as- 
pecto de la página. 


El Data Binding es un concepto primordial en Angular. 
Permite definir la comunicación entre un componente 
y el DOM, lo que hace que sea muy fácil definir apli- 
caciones interactivas sin preocuparnos de la actualiza- 
ción de datos en DOM (push) o la obtención de datos 
desde el DOM (pull). 





Hay tres tipos distintos de Data Binding que difieren 
en la forma que fluyen los datos. Y, para cada uno de ellos, Angular ofrece distintos 
mecanismos: 


Javascript a HTML 
E SOESHS — 9 
-— 

3 Para mostrar propiedades de componentes, etc. 


A Alhacer click de mouse sobre un elemento, etc. 
LR * A cr 
HTML a Javascript 


En los dos sentidos 
——— 


Altrabajar con "textbox" que necesitan estar sincronizados, etc.. 





e One Way Data Binding (del componente al DOM): Interpolación, 
Property Binding y Class Binding. 

e One Way Data Binding (del DOM al componente): Event Binding y 
Sevent. 

e Two Way Data Binding (del componente al DOM y viceversa): FormsModule 
y [aagModel)]. 
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En este ejercicio y en los dos siguientes, veremos ejemplos de todos ellos. Crearemos 
una aplicación que mostrará un artículo con una disponibilidad determinada de 
stock, y una serie de opciones para añadir/quitar unidades del “carrito de compra”. 
Esta aplicación se irá desarrollando a lo largo de estos tres ejercicios haciendo uso de 
todos estos mecanismos. 


1. Nos ubicaremos en ej100 angular, y crearemos el proyecto tecleando 
ng new dataBinding. Seguidamente lo renombraremos para que haga 
referencia a nuestro número de ejercicio ejecutando rename dataBinding 
040 dataBinding, y finalmente pondremos en marcha la aplicación 
ejecutando ng serve desde dentro la carpeta 040 dataBinding. A 
continuación, abriremos el proyecto con Atom. 


:1ej108_angular>ng new dataBinding 

create dataBinding/e2e/app.e2e-spec.ts (294 bytes) 
create dataBinding/e2e/app.po.ts (208 bytes) 

create dataBinding/e2e/tsconfig.e2e.json (235 bytes) 
create dataBinding/karma.conf.js (923 bytes) 


create dataBinding/package.json (1317 bytes) 
create dataBinding/protractor.conf.js (722 bytes) 
create dataBinding/README.md (1102 bytes) 

create dataBinding/tsconfig.json (363 bytes) 
create dataBinding/tslint.json (3048 bytes) 
create dataBinding/.angular-cli.json (1130 bytes) 
create dataBinding/.editorconfig (245 bytes) 
create dataBinding/.gitignore (516 bytes) 





2. Seguidamente añadiremos los links de Bootstrap (https://v4-alpha. 
getbootstrap.com) para poder hacer uso de sus hojas de estilo. Consulte el 
ejercicio ^087 Bootstrap Documentacion" para más información. 


3. La interpolación es la forma más sencilla de visualizar propiedades de un 
componente en su template. Solamente hace falta poner el nombre de la 
propiedad entre [1 ... }} en el template. 


Mediante el siguiente código, crearemos nuestro artículo en el componente 
principal de la aplicación, y con interpolación, mostraremos sus datos en el 
template. La imagen referenciada en el artículo, “assets/old-books.jpg”, la 
encontrará en las fuentes del ejercicio. Debe dejarla en la carpeta assets del 
proyecto. 


src/app/app.component.ts 





export class AppComponent { 


Libro = ("titulo": "Hamlet", "autor": "William Shakespeare”, 


“precio”: 21.30, "stock": 5, “cantidad”: 0, "imagen": "assets/olde- 


books.jpg"); 


src/app/app.component.html 
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«div class-"container-fluid"» 
<div class-"card" style="width: 20rem;”> 
«div class-"card-block"» 


«h4 class="card-title”>[(Libro.titulo))</n4> 





<h6 class-"card-subtitle mb-2 text-muted”>((Libro.autor))</h6> 


«/div» 


«ul elass-"list-group list-group-lush"- 





«li class-"list-group-item"»Unidades disponibles: ((Libro. 


stock))«/li» 








«li class-"list-group-item"»Precio: ((Libro.precio | 





currency:'EUR':true])]«/li» 





«/ul» 


«/div» 





Cuando necesitemos enlazar propiedades de componente a propiedades de 
elementos del DOM podemos usar Property Binding como alternativa 
a la interpolación (que también podría usarse en estos casos). Para usarlo 
pondremos la propiedad del elemento del DOM entre “[...]” asignándole la 
propiedad del componente. 


Continuando nuestro ejercicio, haremos uso de Property Binding para vi- 
sualizar la imagen del artículo: 


src/app/app.component.html 


<img class-"card-img-top img-fluid" [src]="Libro.imagen” 


height-"122" alt-"Imagen no encontrada”> 





«div class-"card-block"» 





Class binding nos permite especificar una clase CSS para añadir a un 
elemento del DOM si una propiedad de un componente es true. Su sintaxis 
es similar a la de "Property binding", con la diferencia que hay que añadir 
"class." delante la clase CSS, y que la propiedad del componente debe ser 
tipo booleano. 


Para terminar el ejercicio, haremos uso de Class Binding para añadir la clase 
CSS "aviso" (poner letras en rojo) al indicador de "unidades disponibles" en 
el caso de que no haya stock. Para ello, añadiremos: 


src/app/app.component.css 


4aviso( e60lor: red; } 


src/app/app.component.html 
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Descargado en: eybooks.com 





«li class="list-group-item” [class.aviso]="Libro. 


stock--0"»Unidades disponibles: ((Libro.stockj)«/li» 





6. Desde el navegador (http://localhost:4200/) podrá ver el estado de nuestra 
aplicación. Puede cambiar valores del artículo, incluido poner a O “Libro. 
enStock”, y comprobar cómo se actualiza la vista. 


/ € Detabinina x 
€ > Q |Qtxlhost4200 


Hamlet 
William Shakespeare 


Unidades disponibles: 5 


Precio: £21.30 


/ Q Derafindang FO 
€ > © |Q tocalhost:4200 


Hamlet 


William Shakespeare 


Precio: €21.30 
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¿Lo One Way Data Binding 
(desde el DOM): Event 
Binding y Sevent 





En este ejercicio analizaremos los mecanismos que 

ofrece Angular para el envío de datos del DOM al com- 
ponente: Event Binding y $event. Son mecanismos de 
comunicación de un solo sentido, de la vista al compo- 


nente, por eso los llamamos mecanismos de One Way 
Data Binding. 


Event Binding nos permite capturar cualquier even- 
to estándar del DOM (hacer clic en un botón, pasar el 
ratón por encima de determinado elemento, etc.) y 
transmitirlo al componente para que realice las accio- 
nes que convengan. Para hacer uso de Event Binding 
simplemente pondremos el evento que queramos con- 
trolar entre paréntesis y sin “on” de delante, y lo asig- 
naremos a una función del componente. Veamos unos 
ejemplos: 





«div (mouseover)-"funcionX()"» 
<input type="text” (keydown)-"funcionY()"» 


«form (submit)-"funcionZz()"» 


Algunas veces necesitaremos información adicional en relación al evento que estamos 
controlando, por lo que necesitaremos tener acceso al objeto event que se haya pro- 
ducido. Este procedimiento lo haremos pasando el objeto event al método de nuestro 
componente con $event. Veamos un ejemplo de cómo usarlo en el caso que quisiéra- 
mos saber qué tecla se ha pulsado al producirse un evento de tecla pulsada (Keydown): 


<input type-"text" (keydown)-"funcionY ($event)"» 





funcionY(event) { console.log(“Tecla pulsada: " + event.keyCode); ) 
Continuando la aplicación que habíamos empezado en el anterior ejercicio, le aña- 


diremos las opciones para añadir/quitar unidades del “carrito de compra" utilizando 
los mecanismos Event Binding y $event. 


1. Desde línea de comandos nos situaremos en ej100 angular/040 
dataBinding, y ejecutaremos la aplicación con ng serve. A continuación, 


abriremos el proyecto con Atom. 


2. En el template del componente añadiremos los botones de añadir/quitar 
unidades del "carrito de compra" junto a un visor con la cantidad de unidades 
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que tenemos en el carrito. Mediante Event Binding gestionaremos el evento 
click sobre los botones. Este es el código que hay que añadir: 





src/app/app.component.ts 
export class AppComponent { 


downCantidad (libro) ( 


if (Libro, cantidad > 0 ) libro.cantidad--; 


} 
upCantidad (libro) { 


if (libro.cantidad < libro.stock ) libro.cantidad++; 


src/app/app.component.html 





</ulL> 

<div class="text-center”> 
«button (click)="downCantidad (Libro) ”>-</button> 
[íLibro.cantidad)) 
<button (click)="upCantidad (Libro) “>+</button> 


</div> 





Como vemos en el navegador, los botones de quitar/añadir unidades fun- 
cionan correctamente. Sin embargo, podemos añadir una mejora. Podemos 
hacer uso de Property Binding, visto en el anterior capítulo, para desha- 
bilitar los botones cuando al hacer clic sobre ellos no tenga ningún efecto 
debido a las restricciones que hemos puesto en downCantidad(libro) y upCan- 
tidad(libro). Esto lo realizaremos añadiendo el siguiente código: 


src/app/app.component.html 


«button [disabled]="Libro.cantidad<=0" (click)="downCantidad (Libro)"» 
-«/button» 
[íLibro.cantidad)) 


«button [disabled]="Libro.cantidad>=Libro.stock” 





(click) ="upCantidad (Libro) ">+</button> 





Finalmente, para ver un ejemplo de uso de $event junto a Event Binding, 
capturaremos el evento de movimiento de ratón sobre la imagen e indica- 
remos por log en qué posición se encuentra el ratón (recuerde que para ver 
los logs debe hacer clic sobre “Más Herramientas/Herramientas para desarro- 
lladores” del menú de Google Chrome). Para ello, añadiremos el siguiente 
código: 
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src/app/app.component.ts 
export class AppComponent { 


getCoord (event) { console.log(event.clientX + “, " + event. 


clientY); ) 
) 


src/app/app.component.html 


<img class-"card-img-top img-fluid” [src]="Libro.imagen” 
(mousemove) ="getCoord ($event)” height-"122" alt-"Imagen no 


encontrada”> 





Desde el navegador (http://localhost:4200/) podrá realizar pruebas de la 
aplicación. Pulsando los botones podrá comprobar cómo se quitan/añaden 
unidades en el “carrito”, podrá comprobar cómo se deshabilitan los botones 
cuando la cantidad es O o cuando se llega al stock disponible y por último 
podrá ver la posición del ratón cuando pase el puntero por encima de la 
imagen. 


Q oratinceg m 
€ > C |O nanen 


Hamlet 
William Shakespeare 





Unidades disponibles: 5 


Precio: €21.30 


B: 


Hamlet 
William Shakespeare 


Unidades disponibles: 5 


Precio: €21,30 


aii 





166 El gran libro de Angular 





FormsModule 
y [(ngModel)] 


Hay ciertas situaciones en las que necesitaremos comu- 
nicación entre componente y DOM en los dos senti- 
dos al mismo tiempo. Por ejemplo, este sería el caso 
de un elemento “input” del DOM. Por una parte, ne- 
cesitaríamos que se actualizara con el valor de una de- 
terminada propiedad del componente y, por la otra, 
necesitaríamos que escuchara eventos (introducción 
de datos por parte del usuario) actualizando el valor de 
esa propiedad. 


Combinando los mecanismos de One Way Data Bin- 
ding que hemos visto anteriormente podríamos con- 
seguir ese resultado. Veamos cómo podríamos conse- 
guirlo combinando Property Binding y Event Binding 
en un elemento “input” destinado a la entrada de un 
nombre de usuario: 





<input type-"text" [value]="username” 





¿Lo Two Way Data Binding 
(hacia-desde el DOM): 


Importante 





(input)="username = $event.target.value"» 


Sin embargo, Angular nos ofrece una mejor manera de hacerlo. Se trata de ngMo- 
del. Veamos cómo quedaría el código anterior con ngModel: 


<input type-"text" [(ngModel)]="username”> 





Como vemos, su sintaxis es mucho más sencilla y clara. Únicamente hay que tener 
en cuenta que deberemos importar a nuestro proyecto el módulo FormsModule para 


poder hacer uso de ngModel. 


Por otra parte, hay que tener en cuenta que, a diferencia de los mecanismos de One 
Way Data Binding, ngModel solo acepta propiedades de datos de componente. Si lo 
inicializáramos con una función de componente (p. ej.: [(mgModel)]="nombreCom- 


pleto()") se produciría un error. 
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Para continuar la aplicación que habíamos empezado en los anteriores ejercicios, 
vamos a ver cómo usaríamos ngModel al añadir un nuevo elemento “input” 
para poder introducir directamente la cantidad de unidades del artículo que 
deseemos. 


1. Desde línea de comandos nos situaremos en ej100 angular/040 databinding, 
y ejecutaremos la aplicación con ng serve. A continuación, abriremos el 
proyecto con Atom. 


2. Abriremos app.module.ts e importaremos el modulo FormsModule. También 
será necesario ponerlo en "imports:[..]" de (?NgModule para que pueda 
usarse en toda la aplicación. 





src/app/app.module.ts 
import ( BrowserModule ) from "'Gangular/platform-browser'; 


import ( NgModule ) from “Rangular/core'; 


import ( FormsModule ) from '“Rangular/forms'; 


import ( AppComponent ) from "'./app.component'; 


fNgModule (1 
declarations: [ 
AppComponent 
l; 
imports: [ 
BrowserModule, 
FormsModule 
l, 
providers: []; 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 





A continuación, sustituiremos el visor de cantidad “{{Libro.cantidad}” que 
teníamos en la vista por un elemento “input” que nos permita introducir la 
cantidad manualmente. Este elemento “input” lo vincularemos a la propie- 
dad “Libro.cantidad” mediante [(ngModel)]. Esto lo realizaremos añadien- 
do el siguiente código: 
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src/app/app.component.html 


«button [disabled]="Libro.cantidad<=0" 


(click) ="downCantidad (Libro) “>-</button> 


<input type-"text" [(ngModel)]="Libro.cantidad” size="2"> 


<button [disabled]-"Libro.cantidad»-Libro.stock" 





(click) ="upCantidad (Libro) ">+</button> 





Desde el navegador (http://localhost:4200/) podrá comprobar cómo se pro- 
duce el Two Way Data Binding, o sea, la sincronización de datos en los dos 
sentidos, entre la propiedad “Libro.cantidad” del componente y el nuevo 
campo cantidad de la vista: 


Q Databinding Q 2anBinng 


c Q | O Ioezihoztt200 E t c Q (D lecalhort:4300 


Hamlet Hamlet 


William Shakespeare Willlam Shakespeare 


Unidades disponibles: 5 Unidades disponibles: 5 


Precio: €21.30 Precio; €21.30 





a. Si a través del elemento “input” modifica la cantidad a un valor igual 
o superior al stock (5), verá como se deshabilita el botón de incrementar 
cantidad que se enlaza directamente con la propiedad “Libro.cantidad” 
del componente. Lo mismo pasará con el botón decrementar cantidad si 
introduce un valor igual o inferior a 0. 

b. Por otra parte, si usa los botones de decrementar/incrementar cantidad verá 
como el elemento “input” muestra el nuevo valor de la propiedad “Libro. 
cantidad” del componente. 


El gran libro de Angular 169 





too Routing: Introducción 
y configuración básica 
(parte I) 


Como todos sabemos, la navegación web se realiza me- l — 
diante la siguiente serie de acciones: Boos 


e Siintroducimos una dirección URL en la barra 
de direcciones del navegador, cambiaremos de 
página. 

e Si hacemos clic en un vínculo de una página, 
cambiaremos de página. 

e Si hacemos clic sobre los botones de avance y 
retroceso del navegador, navegaremos hacia 
atrás y hacia delante a través del historial de 
páginas que haya visto. 





Toda aplicación Web se adapta a esta forma de navegación a través de algún 
sistema para gestionar sus rutas (direcciones URL) y vistas asociadas (páginas 
HTML). En el caso de Angular, esta gestión la haremos con el servicio Angular 
Router. 


El servicio Router no es accesible por defecto. Tiene su propio paquete sobre el cual 
deberemos realizar la siguiente importación: 


import ( RouterModule, Routes ) from "'Gangular/router'; 


Las rutas que gestionaremos con Angular 
Router serán relativas a una ruta raíz. Esta 
la configuraremos con “<base href>” 
dentro de la etiqueta "head" de "src/in- 
dex.html". Para los proyectos creados con 
Angular cli, mediante "ng new ...", esta 
configuración ya está realizada. Se asigna 
"|" como ruta raíz. 


index html 
<!doctype html» 
<html lang="en"> 
<head> 


«meta charset-"utf-8"» 
«title»Routing«/title» 
«base href="/"> 
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El servicio Router necesita que le indiquemos una configuración de rutas con la 
que trabajar. Esta la realizaremos en dos pasos: 


1. Creación de la cadena de rutas donde indicaremos la asociación “ruta - 
componente”: 


const appRoutes: Routes = [ 
( path: «pathl», component:<componente a mostrar» ], 
( path: <path2>, component:«componente a mostrar» ], 
3 
( path: “Y, redirectTo: <pathX>, pathMatch: "full' ], 


( path: '**', component:<componente a mostrar» ]]; 


2. Asignación de la cadena de rutas al servicio Router mediante el método 
RouterModule.forRoot(Routes). 


La configuración indica qué componentes 
deben visualizarse por el navegador para 
distintos path de ruta. Y esto es lo que rea- 
liza el servicio Router. Cuando en la barra 
de direcciones del navegador entremos 
una dirección URL determinada, el servi- 
cio intentará hacer “match” de esa direc- 
ción con los path de rutas configuradas. Si 
lo consigue, mostrará el componente que 
corresponda. 





Esto significa que para una situación como la siguiente, el servicio Router visualiza- 
ría el componente “UsuarioListaComponent”. 


Dirección URL Configuración de rutas Componente 
seleccionado 


localhost :4200/ const appRoutes: Routes = [ UsuarioListaComponent 
Usuario 


( path: "Usuario', 


component :UsuarioListaComponent 


Tas 





En la cadena de rutas de ejemplo que hemos visto antes, aparecen dos path con 
unas características particulares: 


e  *: El servicio Router seleccionará esta ruta cuando el URL este vacía (p. ej., 


“localhost:4200/”). Normalmente esta situación sucederá al acceder a la 
aplicación por primera vez. 
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e  ***: El servicio Router seleccionará esta ruta cuando el URL no coincida con 
ninguna configuración anterior. 


Para redireccionar rutas haremos uso de redirecTo. En el ejemplo que veremos más 
adelante, se realizará una redirección a otra ruta en el caso que el URL esté vacío 
(“http://localhost:4200”). Cuando se usa el redirecTo, es obligatorio añadir un valor 
para pathMatch para indicar al servicio cómo debe realizar el “match” de un URL 
con el path de ruta. 





El servicio Router siempre recorre la configuración de rutas de arriba abajo. Por lo 
tanto, es importante el orden de las rutas en la configuración. Siempre de- 
beríamos poner las más específicas arriba y abajo las más generales. Esto implica que 
la configuración de path '**', por su significado, siempre tiene que estar en última 
posición, ya que el servicio Router ignorará cualquier otra configuración que haya 
por debajo. 


Una vez el servicio Router haya seleccionado el componente adecuado, lo visua- 


lizará por pantalla. Concretamente lo situará donde se encuentre la etiqueta 
router-outlet: 


«router-outlet»«/router-outlet» 


app.component.html 
«div class-"container"» 


krouter-outlet»«/router-outlet» 


</div> 





Con una configuración de rutas básica como la que hemos visto, solamente ten- 
dremos una etiqueta “router-outlet” en el template principal de la aplicación. 
Sin embargo, tal como veremos más adelante, podríamos tener rutas anidadas 
en la configuración y, en ese caso, tendríamos varias etiquetas router-outlet. 


Como puede observar, la navegación por la aplicación consistiría en pasar de una 


vista a otra sin salir nunca de la página HTML que tuviera la etiqueta "router-out- 
let". Por tanto, realmente estaríamos navegando en una aplicación de una sola 
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página o SPA (single-page application), concepto del que habíamos hablado en el 
capítulo 02 “Introducción a las aplicaciones SPA”. Consulte ese capítulo si desea 
más información. 
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Lo Routing: Introducción 
y configuración básica 
(parte II) 


Una vez vista la introducción al servicio Router, vamos 
a crear una aplicación para poner en práctica todo lo 

aprendido. La aplicación consistirá en un sencillo ges- 
tor de Libros y Autores. Tendremos una vista libros y 


una para autores, y pasaremos de una a otra cambian- 
do el URL de la barra de direcciones del navegador. 


1. Nos ubicaremos en ej100 angular, y crearemos 
el proyecto tecleando ng new routing. 
Seguidamente lo renombraremos para que 
haga referencia a nuestro nümero de ejercicio 
ejecutando rename routing 044 routing, y 
finalmente pondremos en marcha la aplicación 
ejecutando ng serve desde la carpeta 044 routing. A continuación, abriremos 
el proyecto con el editor Atom. 





:XEj1ee angular»ng new routing 

create routing/e2e/app.e2e-spec.ts (289 bytes) 
create routing/e2e/app.po.ts (288 bytes) 
create routing/e2e/tsconfig.e2e.json (235 bytes) 
create routing/karma.conf.js (923 bytes) 
create routing/package.json (1312 bytes) 
create routing/protractor.conf.js (722 bytes) 
create routing/README.md (16098 bytes) 

create routing/tsconfig.json (363 bytes) 
create routing/tslint.json (3640 bytes) 
create routing/.angular-cli.json (1125 bytes) 





2. Seguidamente añadiremos los links de Bootstrap (https://v4-alpha.getbootstrap. 
com) en index.html para poder hacer uso de sus hojas de estilo. Consulte “087 
Bootstrap. Introducción” para obtener más información. 





3. Desde la línea de comandos, crearemos los componentes LibroLista, 
AutorLista y NotFound con los que trabajará el servicio Router. El 
componente NotFound se visualizará por pantalla cuando el servicio Router 
no pueda resolver la ruta. 


C:NEj100 angularN044 routing»ng generate component libroLista 


C:NEj100 angularN044 routing»ng generate component autorLista 








C:NEj100 angularVN044 routing»ng generate component notFound 
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RH argularvasa_rostirgang generate component librotista 
te src/app/libro-lista/libro-listas.component.html (30 bytes) 
e src/app/libro-lista/libro-lista.component.spec.ts (057 bytes) 
è src/app/libro-licsta/libro-lizta.component.ts (2B8 bytes) 
veste src/app/lHbro-115ta/11bro-l1sta.compoaent.css (6 bytes) 
r te src/app/app.module.ts (414 bytes) 


angularVO44 routing?ng generate component autorlista 
reete src/app/mrtor-lista/autor-lista.compoaent.html] (36 bytes) 

» src/app/autor-lista/autan-lictz.component.spoc.ts (057 bytes) 
reste src/app/eutor-11sta/autor-l1sta.component ts (288 bytes) 
reste src/appfeutor-TIsta/auton-Jlista.component.css (6 bytes) 
ipdate smc/app/app.module.ts (S34 bytes) 


:MFj100 angularVe44 routing»ng generate component notFound 
cresto srmc/app/not -found/not found. componeat -html (23 bytes) 
ste srclapp/not - Found/not - Found. compoeeat spec. ts (643 bytes) 
resta sPc/app/not - Found/not -Found. Component .ts (280 bytes) 
te sPCJapp/not -Found/not -Found . Component css. (9 bytes) 
update src/app/spp.module.ts (986 bytes) 





:1EJ1688_argulari844_roat ing). 


En este punto, desarrollaremos el componente libroLista. Para ello, previa- 
mente crearemos el modelo de datos Libro (libro.model.ts) y un fichero 
mock data (mocks.ts) con un conjunto de libros de prueba. Esto lo reali- 
zaremos mediante la opción New File del menü que aparece al pulsar el bo- 
tón derecho del ratón sobre la carpeta app. Luego, añadiremos el siguiente 
código: 


~ EE 044 routing 
> a ele 
> ® node_modules 
~ E src 
~ E ap; 
> E 
> E 
> En 


Search in Directory 
New File 

New Folder 

3 Rename 
g uplicate 
As Delete 
Copy 


Cut 


src/app/libro.model.ts 


export class Libro { id: number; titulo: string; autor: string;) 








src/app/mocks.ts 


import( Libro ) from'./libro.model'; 


export const LIBROS: Libro[] — [i"zd": 1,"titulo": "BL Quijote","autor": 





“Cervantes”), { “id”: 2,"titulo": "Hamlet","autor": "Shakespea- 


el; 





Seguidamente realizaremos las siguientes modificaciones en el componente 
libroLista para que visualice esos libros: 
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src/app/libro-lista/libro-lista.component.ts 


importí Libro ) from” ../libro.model'; 


import { LIBROS ) from "'../mocks'; 


export class LibroListaComponent implements OnInit { 


Libros: Tabo. 


ngOnInit() ( this.libros = LIBROS; } 


} 
src/app/libro-lista/libro-lista.component.html 


<h4>Libros:</h4> 

<ul> 
«li *ngFor="let libro of libros”> 
(( libro.titulo }} 


e d 





«/ul» 


4. Una vez creados los componentes, pasaremos a realizar la configuración del 
servicio Router. El primer paso será realizar la importación del servicio en 
"app.module.ts": 


src/app/app.module.ts 


import ( RouterModule, Routes ) from "'Gangular/router';.. 





A continuación, realizaremos la configuración de rutas en el mismo 
fichero: 


src/app/app.module.ts 

const appRoutes: Routes = [ 
path: "'libros', component: LibroListaComponent ), 
path: ‘autores’, component: AutorListaComponent ], 
paths., redireotTo: */libros", pathMateh: fali” +, 


path: '**', component: NotFoundComponent ) 


fNgModule (1 


declarations: [.], 


imports: [..,RouterModule.forRoot (appRoutes)], 
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Y, finalmente, pondremos la etiqueta router-outlet para indicar al servi- 
cio Router dónde realizar las visualizaciones de los componentes. Para ello, 
ponga el siguiente código en “app.component.html”: 





src/app/app.component.html 


<div style-"text-align:center"» 


<h3>Servicio Router: ejemplos de uso</h3> 


«/div» 


«router-outlet»«/router-outlet» 





5. La primera parte del ejercicio termina aquí. Desde el navegador puede 
realizar las pruebas para validar el código. Para el URL “localhost:4200/”, 
será redireccionado a "localhost:4200/libros", donde visualizará la vista de 
libros, para “localhost:4200/autores”, visualizará la vista de autores, y para 
cualquier otra ruta, visualizará la vista de “Not Found". 


JO Rouen x wem / Q touring x UA 
€» cl O iecahonao ier: wow): € > Q |O eno] €x: 
Servicio Router: ejemplos de uso Servicio Router: ejemplos de uso 
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(L5. Routing: RouterLinks 


Llegados a este punto, nuestro servicio Router ya esta- 

ría gestionando correctamente los cambios de direccio- 
nes URL de la barra de direcciones del navegador. Sin 
embargo, la navegación en una aplicación web princi- 


palmente se realiza desde la misma aplicación hacien- 
do clics sobre enlaces a otras vistas. 


En HTML, estos enlaces se realizan mediante la eti- 
queta «a» y su atributo "href", que sería donde pon- 
dríamos la dirección URL. Sin embargo, al haber crea- 
do un servicio Router, nos interesa que todo el con- 
trol de rutas lo realice el mismo servicio. Por eso Angular dispone de las directivas 
RouterLink. Si en las etiquetas «a» sustituimos los atributos "href" por directivas 
RouterLink, conseguiremos que el servicio Router tome el control de todos estos 
elementos. 





Los path configurados en RouterLink pueden ser estáticos: 
«a routerLink-"/grupo/a/usuario/alberto" routerLinkActive-"active-link"»..«/a» 


o dinámicos, donde usamos una cadena con literales y variables para formar el 
path dinámicamente: 


«a [routerLink]-['/grupo', grupold, "usuario', usuarioNombre]>..</a> 
g 


En el primero de los ejemplos anteriores, se hace uso de la directiva Router- 
LinkActive. Esta directiva sirve para aplicar una clase CSS al elemento cuando la 
ruta del link esté activa. De esta manera podremos distinguir qué enlace, de todos 
los visibles en la aplicación, es el que está activo. 


Por otra parte, el primer segmento del path puede venir precedido por “/”, “../” 
o “./”. Esto indica a Angular en qué parte de árbol de rutas realizar el link del 
path. Si, por el URL activo, el que aparece en la barra de direcciones, fuese “local- 
host:4200/libros” y quisiéramos desplazarnos a “localhost:4200/libros/comics”, en 
routeLink podríamos poner el path "/libros/comics" o “./comics” o “comics”. 
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Continuando la aplicación que habíamos empezado en el ejercicio anterior, añadi- 
remos dos enlaces en la página principal de la aplicación usando RouterLink. Uno 
nos llevará a la vista de los libros y el otro a la de los autores. 


1. Desde la línea de comandos nos situaremos en ej100 angular/044 routing, 
y ejecutaremos la aplicación con mg serve. A continuación, abriremos el 
proyecto con Atom. 


2. A continuación, editaremos el template del componente principal de la 
aplicación y añadiremos los dos enlaces usando RouterLink. Todas las 
clases CSS usadas en el siguiente código forman parte de las hojas de estilo 
de Bootstrap. 





src/app/app.component.html 


«ul class-"nav"» 
«li class-"nav-item"» 


«a class-"nav-link active" routerLink-"/libros"»Libros«/a» 


</li> 


<li class="nav-item”> 
«a class-"nav-link" routerLink=”/autores”>Autores</a> 
SALE. 


«/ul» 





«router-outlet»«/router-outlet» 


Desde el navegador puede realizar pruebas de los enlaces. Al hacer clic sobre 
uno u otro link verá cómo cambia la vista y la dirección URL de la barra de 
direcciones del navegador. 
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3. El siguiente paso será usar la directiva RouterLinkActive para añadir una 
clase CSS al enlace cuando este haya sido seleccionado. De esta manera, 
en cualquier momento podremos ver a qué enlace pertenece la vista que 
tenemos en pantalla. 


4. Para ello, primero crearemos la clase CSS active-link en app.component. 
css, O sea, en la hoja de estilos asociada al componente principal de la 
aplicación. Lo único que hará esta clase CSS será dejar las letras en color 
naranja. 





src/app/app.component.css 


.active-link ( 


color: orange; 





Finalmente añadiremos el uso de RouterLinkActive en los enlaces creados: 


src/app/app.component.html 


«ul class-"nav"» 
«li class-"nav-item"» 


«a class-"nav-link active" routerLink-"/libros" router- 


LinkActive-"active-link"»Libros«/a» 
</li> 
<li class="nav-item”> 


<a class="nav-link” routerLink=”/autores” routerLinkActi- 


ve-"active-link"»Autores«/a» 


«7 ld» 


sul» 





«router-outlet»«/router-outlet» 
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5. Desde el navegador podrá comprobar cómo cambia el color del enlace a 
naranja cuando lo selecciona. 


€ > 0 [Ona A 
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o Routing: Rutas 
con parámetros 
y ActivatedRoute 


En una configuración de rutas podríamos tener rutas i - 
con parámetros, es decir, rutas con una parte fija y otra E 
variable. Por ejemplo: 


const appRoutes: Routes = [ 


{ path: "'"libro/:id', component:«componente a 


mostrar» , -— 


Con esta configuración, el servicio Router selecciona- 
ría esta primera línea de configuración para direccio- 
nes URL como: "/libro/2, "/libro/aa" o "/libro/4vd", 
pero no para direcciones como "libro/2/opiniones" o 
“libro/3/productos-relacionados”. Luego, el compo- 
nente seleccionado accedería al valor del parámetro 
“:id” para realizar las acciones que convenga. 





Para obtener el valor de los parámetros que pueden venir por URL, el compo- 
nente utiliza el objeto ActivatedRoute. ActivatedRoute contiene información 
de la ruta asociada al componente que actualmente tengamos cargado en la eti- 
queta “router-outlet”, por lo tanto, información de la actual ruta activa. Si de- 
sea más información de ActivatedRoute consulte https://angular.io/api/router/ 
ActivatedRoute. 


Para continuar con la aplicación que habíamos empezado en los ejercicios anterio- 
res, vamos a crear el código necesario para que se puedan seleccionar libros de la 
lista de libros y ver su detalle. El detalle lo gestionará un nuevo componente, Libro- 
Detalle, al que asociaremos a una nueva ruta URL: “libros/:id”. El parámetro “:id” 
indicará el libro del cual deseamos ver su detalle. 


1. Desde línea de comandos nos situaremos en ej100 angular/044 
routing, y ejecutaremos la aplicación con ng serve. A continuación, 


abriremos el proyecto con Atom. 


2. Sin salir de línea de comandos, crearemos el componente LibroDetalle. 


C:NEj100 angularN044 routing>ng generate component libroDetalle 
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:XFj100 angularXe44 routing»ng generate component libroDetalle 

create src/app/libro-detalle/libro-detalle.component.html (32 bytes) 
create src/app/libro-detalle/libro-detalle.component.spec.ts (671 bytes) 
create src/app/libro-detalle/libro-detalle.component.ts (296 bytes) 


create src/app/libro-detalle/libro-detalle.component.css (0 bytes) 
update src/app/app.module.ts (1083 bytes) 


:XEj10e0 angularXe44 routing» 





3. Seguidamente, en la configuración de rutas, afiadiremos la nueva ruta y 
componente: 


src/app/app.module.ts 


const appRoutes: Routes = [ 


( path: ‘Libros’, component: LibroListaComponent ), 


{ path: "'libros/:id', component: LibroDetalleComponent ], 





En el componente LibroDetalle añadiremos el código para primero obte- 
ner el identificador del libro (parámetro ":id" del URL) y luego para leer 
el detalle de ese libro. 


Para obtener los parámetros de la ruta, ActivateRoute nos proporciona 
el observable paramMap. Para obtenerlos, simplemente nos suscribire- 
mos al observable a la espera de recibirlos. De esta manera recibiremos el 
identificador de libro. En el capítulo "052 Servicios: Gestión asíncrona 
con observables" veremos con más detalle los observables, pero, en lo 
que respecta a este ejercicio, no es necesario que profundicemos más en 
el tema. 
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src/app/libro-detalle/libro-detalle.component.ts 


import ( Component, OnInit } from 'Gangular/core'; 
import { ActivatedRoute, ParamMap ) from "'Gangular/router'; 


import( Libro ) from'../libro.model'; 


import ( LIBROS ) from "'../mocks'; 


export class LibroDetalleComponent implements OnInit ( 


libro: Libro; 


constructor( private route: ActivatedRoute) 


ngOnInit() ( 
this.route.paramMap 
.subscribe((params: ParamMap) => ( 


let id = +params.get('id'); 





this.libro = LIBROS.find(item => item.id === id); 





En el template del componente añadiremos el código para visualizar el deta- 
lle del libro. 


src/app/libro-detalle/libro-detalle.component.html 
<h4>Libro detalle:</h4> 


«dl class-"dl-horizontal"» 
<dt>Identificador</dt><dd>1f libro.id ))</dd> 


«dt»Titulo«/dt»«dd»[| libro.titulo ))</dd> 


<dt>Autor</dt><dd>1f libro.autor ))</dd> 


«/dl» 





4. Y, finalmente, añadiremos un enlace o link al componente LibroDetalle 
para cada uno de los libros del componente LibroLista: 


src/app/libro-lista/libro-lista.component.html 
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«li *ngFor="let libro of libros”> 


<a [touterLink]-"|' Libros; librog.id]"- 
(( libro.titulo )) 
</a> 


pos 





Desde el navegador puede realizar pruebas de los diferentes enlaces creados. 
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¿275 Routing: child routes 


Angular nos permite crear árboles de configuraciones de rutas mediante child 
routes: 


( path: 'actor/:id', component: LibroDetalleComponent, 


children: [ 


( path: 'biografia', component: ActorBiografiaComponent ], 





( path: "filmografia', component: ActorFilmografiaComponent ) 


Jig 


Los path de configuraciones hijos son relativos a los de las configuraciones padre. 
Por ejemplo, "/actor/:id/biografia" o "/actor/:id/filmografia" en el código anterior. 
Por otra parte, en el template de todo componente padre siempre habrá que añadir 
la etiqueta router-outlet. Allí será donde el servicio Router visualice los compo- 
nentes hijos. 


Al usar child routes, podemos tener varias rutas activas 

(ActivatedRoute) al mismo tiempo durante la navega- 
ción. En esta situación, es probable que desde un com- 
ponente cualquiera necesitemos acceder a una ruta de- 
terminada del árbol de rutas activas para, por ejemplo, 
leer parámetros. Angular nos proporciona dos maneras 
de acceder al árbol de rutas activas. La primera consis- 
te en partir de una ruta activa (ActivatedRoute) 
cualquiera, y usar sus propiedades parent y children 
para desplazarnos por el árbol. Y la segunda consiste 
en usar la propiedad RouterState. Esta propiedad nos 
permite obtener el árbol de rutas activas en cualquier 
momento y lugar de la aplicación. 





Continuando la aplicación que habíamos empezado en los ejercicios anteriores, va- 
mos a afiadir dos child routes, "opiniones" y "imágenes", a la ruta "libros/:id". Las 
dos rutas estarán asociadas a dos nuevos componentes, "LibroOpiniones" y “Librol- 
magenes", respectivamente. No entraremos a desarrollar estos dos componentes, 
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pero sí que les añadiremos el código necesario para obtener el identificador de libro 
del URL. 


1. Desde línea de comandos nos situaremos en ej100_angular/044 routing, 
y ejecutaremos la aplicación con ng serve. A continuación, abriremos el 
proyecto con Atom. 


2. Sin salir de la línea de comandos, crearemos el componente LibroOpiniones 
y Librolmagenes. 





C:NEj100 angularN044 routing»ng generate component libroOpiniones 





C:NEj100 angularN044 routing»ng generate component libroImagenes 


:XEjiee angularYVe44 routing»ng generate component libroOpiniones 

create src/app/libro-opiniones/libro-opiniones.component.htm] (34 bytes) 
create src/app/libro-opiniones/libro-opiniones.component.spec.ts (685 bytes) 
create src/app/libro-opiniones/libro-opiniones.component.ts (384 bytes) 
create srcfapp/libro-opiniones/libro-opIniones.component.css (8 bytes) 


update src/app/app.module.ts (1260 bytes) 


:XEjiee angularXea4 routing»ng generate component librolImagenes 

create src/app/libro- imagenes/1libro-imagenes.component html (33 bytes) 
create src/app/libro-imagenes/libro-imagenes.component.spec.ts (678 bytes) 
create src/app/libro-imagenes/libro-imagenes.component.ts (300 bytes) 
create srcfapp/libro-imagenes/libro-imagenes.component.css (e bytes) 
update src/app/app.module.ts (1372 bytes) 


:\Ej100 angularXe44 routing», 





3. Seguidamente, en la configuración de rutas, afiadiremos las nuevas child 
routes: 


src/app/app.module.ts 


( path: "libros/:id', component: LibroDetalleComponent, 
children: [ 
path: ‘imagenes’, component: LibrolmagenesComponent ], 


path: ‘opiniones’, component: LibroOpinionesComponent ), 


path: W, redirectTo: “imagenes”, pathMatch: "full' ], 


path: ***”, component: NotFoundComponent } 





En el template del componente padre, LibroDetalle, añadiremos dos en- 
laces a estas nuevas rutas y la etiqueta router-outlet para visualizar sus 
componentes asociados: 


El gran libro de Angular 187 





src/app/libro-detalle/libro-detalle.component.html 








<ul class="list-inline”> 





«li class-"list-inline-item"»«h4»Información adicional:«/h4»«/li» 











«li class-"list-inline-item"»«a routerLink-"imagenes" routerLinkAc- 


tive-"active-link"»Imágenes«/a»«/li» 








«li class-"list-inline-item"»«a routerLink-"opiniones" router- 


LinkActive-"active-link"»Opiniones«/a»«/li» 


</ul> 


<router-outlet></router-outlet> 


src/app/libro-detalle/libro-detalle.component.css 


.active-link ( color: orange;) 





4. A continuación, añadiremos el código necesario en Librolmagenes para 
cargar el identificador de libro que serviría al componente para cargar las 
imágenes relacionadas. Para ello, haremos uso de ActivatedRoute primero 
para acceder al ActivatedRoute parent, y luego para obtener el valor del 
parámetro. 


src/app/libro-imagenes/libro-imagenes.component.ts 


import { ActivatedRoute, ParamMap ) from '“fangular/router'; 


export class LibrolmagenesComponent implements OnInit { 


idLibro: number; 


Constructor ( private route: ActivatedRoute ) { ) 
ngOnInit() ( 


this.route.parent.paramMap 


.subscribe((params: ParamMap) => ( 


this.idLibro = +params.get ('id'); 
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src/app/libro-imagenes/libro-imagenes.component.html 


<p> (Imagenes del libro con identificador: ([([idLibro)))</p> 





Desde el navegador puede realizar pruebas de los diferentes enlaces creados. 
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too Inyección de 
dependencias (DI) 





La inyección de dependencias es un patrón de 
diseño muy usado en Angular. Se basa en que las cla- 

ses no crean sus dependencias por sí mismas, sino 
que las reciben de fuentes extremas. 


Analicémoselo con un ejemplo. Imaginen el siguien- 
te código. Se trata de una clase llamada Musico que 
utiliza métodos de un objeto de tipo “Instrumento”. 






import { Instrumento ) from “*./instrumento'; 


export class Musico { 


public instrumento: Instrumento; 


constructor () 1 
this.instrumento = new Instrumento (); 
) 
tocar(): string ( return this.instrumento.tocar(); |] 
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Esta clase Musico presenta los siguientes problemas: 


e Frágil: si por ejemplo se realizaran cambios sobre el constructor de 
“Instrumento” añadiendo un parámetro obligatorio, la clase Musico fallaría 
a no ser que se adaptara su código. 

e Inflexible: no es posible asignarle otro tipo de “Instrumento”, ni tampoco 
es posible que comparta un mismo “Instrumento” a la vez con otro 
“Musico”. Siempre será necesario adaptar su código. 

e Difícil para realizar test: los test sobre “Musico” son peligrosos ya 
que estamos a merced de las dependencias escondidas que no vemos: no 
sabemos qué puede suponer crear un objeto de tipo “Instrumento” en un 
entorno de pruebas... 


Aplicando la inyección de dependencias, la clase Musico quedaría de la siguien- 
te manera: 


import { Instrumento ) from './instrumento'; 


export class Musico { 


constructor (public instrumento: Instrumento) ( } 


tocar()t string { return this.instrumento.tocar(); |] 


Y el consumidor de la clase realizaría lo siguiente: 


import { Musico ) from "'./musico'; 
import { Instrumento ) from "'./instrumento'; 
let musico = new Musico(new Instrumento()); 


console.log(musico.tocar()); 


Las definiciones de las dependencias ahora están en el constructor. La clase Musico 
ya no crea el objeto "Instrumento", ahora lo consume. De esta manera, quien hace 
uso de Musico es quien tiene todo el control sobre sus dependencias. Por tanto, po- 
demos realizar acciones como las que comentábamos antes sin que el código de la 
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clase Musico se vea afectado. Por ejemplo, podríamos crear una nueva versión de la 
clase Instrumento añadiendo un parámetro obligatorio en su constructor: 


export class Instrumento2 ( 


constructor (public nombre: string) (1) 


btocar()r string da) 


) 


y probarla en nuestra clase Musico sin realizar más modificaciones: 


//let musico = new Musico (new Instrumento ()); 
let nombre = “piano”; 
let musico = new Musico(new Instrumento2 (nombre)); 


A pesar de las ventajas comentadas, ahora el consumidor se ve obligado a crear 
todas las dependencias de la clase Musico cuando antes no tenía que hacer- 
lo. Para solucionar este y otros temas relacionados, existen los frameworks 
de inyección de dependencias. Angular dispone de su propio framework 
al respecto. Entre otras cosas, nos permitirá que mediante el uso de inyectores 
(injectors) y proveedores (providers) configuremos el sistema para que el 
consumidor simplemente tenga que realizar lo siguiente para crear un objeto 
Musico: 


Inyección de Dependencias 











let musico = injector.get (Musico); 


console.log (musico.tocar()); 
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Tanto el consumidor como la clase Musico solamente preguntan por lo que necesi- 
tan y el inyector lo entrega. 


En los siguientes capítulos describiremos en detalle del framework de inyección de 
dependencias de Angular. 
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o ^ 


(5S. Servicios: Definición 
y uso mediante 

la inyección de 
dependencias (parte l) 


Un servicio Angular es una clase que encapsula al- 
gún tipo de funcionalidad común entre los diferentes 
componentes de la aplicación, como podría ser, por 
ejemplo, el acceso a datos. La extracción de funciona- 
lidades comunes de los componentes para crear servi- 
cios supone toda una serie de ventajas: 


Importante 


e  Evitamos la repetición innecesaria de código en 
los componentes, por lo que su código acaba 
siendo más ligero y centrado en el soporte a la 
vista. 

e Podemos crear servicios mock (de prueba) que 
faciliten el análisis de los componentes que los 
usan. 

e Mejoramos el control y mantenimiento de esas funcionalidades comunes. 





Vamos a ver cómo sería el formato estándar de cualquier servicio a través de un 
ejemplo: 


import { Injectable ) from “*Rangular/core'; 


QInjectable() 
export class LoggerService { 
log (message: string) { console.log (message); } 


constructor() { } 


Como vemos no es más que una clase estándar donde se le ha añadido el decora- 
dor @Injectable(). De momento dejaremos el análisis de este decorador para más 
adelante. 


Los servicios son suministrados a los componentes mediante el patrón de diseño 
inyección de dependencias que hemos visto en el capítulo anterior. Angular 
incorpora un framework al respecto. Básicamente, este framework nos facilita la 
gestión de dependencias mediante inyectores (injectors) y proveedores (pro- 
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viders). Estos elementos los podríamos definir de la si- 
guiente manera: 


inyector 


e Un inyector mantiene una colección de servicios 
previamente instanciados. Si se requiere un 
servicio aun no instanciado, el inyector crea una Proveedor 
instancia mediante un proveedor y lo agrega a la 
colección. 

e Un proveedor es algo que puede crear o devolver 
una instancia de servicio. Normalmente es la 
clase del servicio en sí. Para que el inyector pueda 
hacer uso de los proveedores, estos deben estar 
registrados. Estos registros pueden hacerse a nivel 
de módulo o componente, dependiendo de la 
disponibilidad que se le quiera dar al servicio. 


Objeto 





En el diagrama general de la arquitectura Angular puede observar dónde se situaría 
el inyector y su colección de servicios previamente instanciados. 


ES 


7— — Popenynndng — 
fe ed le mm 





A partir de aquí, vamos a ver cómo utilizaríamos todas estas herramientas para 
que los componentes pudieran usar el servicio de ejemplo que hemos creado antes 
(LoggerService). 


Durante el proceso de inicialización de la aplicación, Angular ya crea un inyector de 
forma automática. Lo que tenemos que hacer nosotros es registrar el proveedor 
de nuestro servicio para que el inyector pueda usarlo. Dado el tipo de servicio del 
ejemplo, lo registraremos en ngModule para que pueda usarse en toda la aplicación. 
Esto lo haríamos de la siguiente manera: 


fNgModule (1 ..., providers: [LoggerServicel, ...)) 


export class AppModule { ) 


En este caso hemos realizado el registro del proveedor de la forma más básica, sin 
embargo, hay que tener en cuenta que Angular nos ofrece muchas opciones al res- 
pecto. Veamos algunos ejemplos: 
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e. providers: [LoggerService]... O ... [( provide: LoggerService, useClass: 





LoggerService ]] 


Es el método de registro que hemos visto antes. 





e. [( provide: LoggerService, useClass: LoggerService2 )] 


Le decimos al inyector que instancie otra versión del servicio. 


Finalmente haríamos la inyección del servicio en el componente que necesitara 
usarlo: 


Component ({...}) 





export class EjemploComponent implements OnInit ( 


constructor (private loggerService: LoggerService)( } 





ngOnInit() ( this.loggerService.log("hola"); } 


La combinación del tipo de parámetro del constructor (LoggerService), el decorador 
(Component y la información de los proveedores registrados, indican al inyector 
de Angular que inyecte una instancia de "LoggerService" cuando se cree un nuevo 
“EjemploComponent”. Por lo tanto, como consumidores de “EjemploCom- 
ponent", el framework también nos aísla de sus dependencias. 


Desde el punto de vista de un inyector, las dependencias son "singletons". Esto 
significa que, por defecto, el inyector creará una ünica instancia de cada clase, la 
cual será compartida por los distintos componentes. 


Por último, analizaremos un poco el decorador (Injectable() que ponemos en 
las clases de nuestros servicios. El decorador GInjectable() marca una clase como 
disponible para un inyector para poder instanciarla. Sin este decorador, el inyector 
informaría de un error si intentara instanciarla. Los inyectores también son respon- 
sables de instanciar componentes; sin embargo, no hace falta poner CInjectable() 
porque (Component, y otros decoradores como (Directive o (Pipe, son subtipos 
de OInjectable(). 


En el siguiente ejercicio pondremos en práctica todos estos conceptos creando y 
usando un servicio. 
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e e è e e e ^ 

Los Servicios: Definición 

e e 
uso mediante inyecc 

e 

de dependencias 
(parte II) 
En este ejercicio pondremos en práctica los servicios y 
la inyección de dependencias que hemos visto en los 
anteriores capítulos. Aplicaremos todos estos concep- 
tos en una nueva aplicación extraída en parte de la 


aplicación de gestión de Libros que habíamos desarro- 
llado en los ejercicios dedicados al "Router". 


Y 
ION 


1. Nos ubicaremos en ej100_angular, y crearemos 
el proyecto tecleando ng new servicios. 
Seguidamente lo renombraremos para que 
haga referencia a nuestro número de ejercicio 
ejecutando rename servicios 050_servicios, 
y finalmente pondremos en marcha la aplicación 
ejecutando ng serve desde dentro la carpeta 050_servicios. A continuación, 
abriremos el proyecto con el editor Atom. 





:XEj100 angular»ng new servicios 

create servicios/e2e/app.e2e-spec.ts (291 bytes) 
create servicios/e2e/app.po.ts (208 bytes) 
create servicios/e2e/tsconfig.e2e.json (235 bytes) 
create servicios/karma.conf.js (923 bytes) 
create servicios/package.json (1314 bytes) 
create servicios/protractor.conf.js (722 bytes) 
create senvicilos/README.md (1100 bytes) 

create servicios/tsconfig.json (363 bytes) 
create servicios/tslint.json (3048 bytes) 

create servicios! .angular-cl1.json (1127 bytes 


2. Seguidamente añadiremos los links de Bootstrap  (https://v4-alpha. 
getbootstrap.com) en index.html para poder hacer uso de sus hojas de estilo. 
Consulte “087 Bootstrap: Introducción” para obtener más información. 





3. Desde la línea de comandos, crearemos el componente LibroLista. 





Ej100_angularl050_servicios>ng generate component libroLista 


:1ej100 angulartese servicios»ng generate component librolista 
create src/app/libro-lista/libro-lista.component.html (30 bytes) 


create src/app/libro-lista/lIbro-lista.component.spec.ts (657 bytes) 
create src/app/libro-lista/libro-lista.component.ts (288 bytes) 
create src/app/libro-1ista/libro-lista.component.css (0 bytes) 
update src/app/app.module.ts (414 bytes) 


:X£j108 angular1059 servicios», 
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Añadiremos su código y crearemos los ficheros libro.model.ts y mocks.ts 
que necesita: 





src/app/libro-lista/libro-lista.component.ts 


import| Libro } from'../libro.model'; 


import { LIBROS ) from "../mocks'; 


export class LibroListaComponent implements OnInit ( 
libros: Libro[]l; 


ngOnInit() ( this.libros = LIBROS; ) 


src/app/libro-lista/libro-lista.component.html 


Sq 
«li *ngFor-"let libro of libros"»[(( libro.titulo ))</1li> 


</ul> 


src/app/libro.model.ts 


export class Libro [ id: number; titulo: string; autor: string;] 


src/app/mocks.ts 


import( Libro ) from'./libro.model'; 


export sonst LIBROS: Libro[] = [("id": 1,“titulo”: "El Quijo- 





te","autor": “Cervantes”), iL “ide 2, “titulo”: “Hamlet”, aus 


Era. 


ES 





"Shakespeare"]]; 
Seguidamente afiadiremos LibroLista al componente principal para poder 
visualizarlo en el navegador: 


src/app/app.component.html 


«div class-"container"» 


<app-libro-lista></app-libro-lista> 





</div> 


4. El componente LibroLista obtiene los libros por sí solo. Esta funcionalidad 
previsiblemente será usada por otros componentes, por lo que lo mejor será 
dejarlo como servicio. Vamos a crearlo. También crearemos un segundo 
servicio para grabar log que será usado por el primero: 


198 El gran libro de Angular 


:MEj100_angular1050_servicios>nmg generate service libro 
create src/app/libro.service.spec.ts (368 bytes) 
create src/app/libro.service.ts (111 bytes) 


:XEj180 angularX650 servicios»ng generate service logger 
create src/app/logger.service.spec.ts (374 bytes) 
create src/app/logger.service.ts (112 bytes) 


>: E5100_angular1058_servicios> 


Ej100_angularl050_servicios>ng generate service libro 





Ej100_angularl050_servicios>ng generate service logger 





Para poder hacer uso de los servicios, el primer paso será registrar su pro- 
veedor. En este caso, lo haremos a nivel de módulo para que todos sus 
componentes puedan usarlos: 


src/app/app.module.ts 


LoggerService ) from './logger.service'; 





LibroService ] from './libro.service'; 


QGNgModule((.., providers: [LoggerService,LibroService],..)) 


export class AppModule { } 





A continuación, afiadiremos su código. Además, para el servicio Libro, tam- 
bién le inyectaremos el servicio Logger, ya que lo usará: 


src/app/logger.service.ts 


QGInjectable!() 
export class LoggerService { 


eonetructeor( { + 


log (message: string) { 


console.log("(" + new Date() .toLocaleTimeString() + “) " + mes- 


sage);] 
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src/app/libro.service.ts 


fInjectable () 


export class LibroService ( 


constructor (private loggerService: LoggerService) { ) 





getLibros() { 


this.loggerService.log(“Llamada realizada sobre LibroService. 


getLibros”); 


return LIBROS;) 





Finalmente modificaremos nuestro componente para que use el servicio 
Libro: 


src/app/libro-lista/libro-lista.component.ts 


fComponent (1...) ) 
export class LibroListaComponent implements OnInit ( 
libros: Librol[]; 


constructor (private libroService: LibroService)( } 


ngOnInit() ( this.libros = this.libroService.getLibros(); |] 





5. Desde el navegador podrá comprobar su funcionamiento. Recuerde que para 
visualizar log debe habilitar la opción "Más herramienta/Herramientas para 
desarrolladores" de Google Chrome. 
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Libros: 


* El Quijote 
* Hamlet 


running in the development mode. 
Call enableProdMade() to enable 
the production mode. 
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Eo Servicios: Gestión 
asincrona con promesas 





Los dos servicios que hemos creado en el ejercicio 

anterior, LoggerService y LibroService, devuelven res- 
puestas inmediatas, por lo que se han gestionado de 
forma síncrona. Sin embargo, muchas veces ten- 
dremos servicios que realizarán llamadas a servidores 
remotos cuyas respuestas no sabemos cuánto tiempo 
tardarán en llegar. Esos servicios no pueden gestionar- 
se de la misma forma, ya que produciríamos bloqueos 
inaceptables en la aplicación. Esos servicios hay que 
gestionarlos de forma asíncrona. De esta manera, el 
usuario podrá seguir trabajando mientras se ejecutan 
los servicios. 





Las promesas es una de las herramientas que nos per- 

mite la programación asíncrona. Tal como su nombre indica, una promesa la po- 
dríamos definir como un valor que se espera en un tiempo futuro no definido des- 
pués de ejecutar, de forma asíncrona, una operación. Su sintaxis sería la siguiente: 


new Promise( /* ejecutor */ function(resolver, rechazar) 1 ... ) ); 


La función ejecutor empieza a ejecutarse de forma asíncrona justo en el momento 
en el que se crea la promesa. La función ejecutor, al terminar, deberá llamar a la 
función resolver para resolver la promesa con el valor obtenido, o llamar a la fun- 
ción rechazar para rechazarla con el error producido. Finalmente, mediante los 
métodos "then" y "catch" de la promesa, gestionaremos esa resolución y rechazo, 
respectivamente. Vea en el ejemplo cómo gestionamos la promesa devuelta por el 
método getUsuario. 


servicioUsuarios.getUsuario(1) 
.then(function(usuario)(]) 


.catch(function(msg)(1]; 
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Una llamada al método “then” de una promesa devuelve otra promesa a la que tam- 
bién podemos llamar a su método “then”, y así sucesivamente. Esto nos permitirá 
encadenar promesas. 


Vamos a ver unos ejemplos que realizaremos sobre la aplicación que habíamos crea- 
do en el anterior ejercicio. Modificaremos “getLibros” de “LibroService” para que 
devuelva una promesa de los Libros, y le añadiremos un retraso de 5 segundos para 
simular una llamada a un servidor remoto. 


1. Desde línea de comandos nos situaremos en ejl00_angular/050_ 
servicios, y ejecutaremos la aplicación con mg serve. A continuación, 
abriremos el proyecto con el editor Atom. 


2. Editaremos el código del servicio “LibroService” y realizamos las modificaciones 
comentadas: 





src/app/libro.service.ts 


fAInjectable () 


export class LibroService ( 


constructor (private loggerService: LoggerService) (1 ) 





getLibros(): Promise<Libro[1> { 








return new Promise<Libro[l>( (resolve, reject) => { 


this.loggerService.log(“Inicio ejecutor (Promise de LibroService. 


getLibros())”); 
setTimeout (() => { 


this.loggerService.log("Fin ejecutor (Promise de LibroService. 


getLibros ())”); 
resolve (LIBROS); 


5000); 





Finalmente modificaremos el componente para que gestione la promesa: 
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src/app/libro-lista/libro-lista.component.ts 


fComponent ((...)) 


export class LibroListaComponent implements OnInit ( 


libros: Libro[]l; 
constructor (private libroService: LibroService)í } 
ngOnInit() ( 


this.libroService.getLibros().then(libros => this.libros = libros); 





Desde el navegador podremos comprobar su funcionamiento. Recuerde que 
para ver los “logs” debe activar la opción “Más herramientas/Herramientas 
para desarrolladores" de Google Chrome. 


wx i 
Libros: ¡2 a Elements Console Sources Network Performance Memory » | t 





e ElQuijote | 9 | top "oe O| Deu levels Y 1 iem hidden try fiters | 
» Hamlet (11:55:55) Inicio ejecutor (Promise de LibroService.getiibros()) logger.serulce-ts:7 
(11155189) Fin ejecutor (Promise de LibroService.getLibros()) LARRETA service, ERIT 
»| 





3. Para probar el encadenamiento de promesas, realizaremos los siguientes 
cambios: 


src/app/libro-lista/libro-lista.component.ts 


fComponent ((...)) 
export class LibroListaComponent implements OnInit { 
libros: Libro[l;: 


constructor(private libroService: LibroService, private loggerService: 


LoggerService)( ] 


ngOnInit() ( 


this.libroService.getLibros() 
.then( libros => { 


this.loggerService.log("Ejecucion del 1? then"); 





return libros;)) 
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.then( libros => ( 


this.loggerService.log(“Ejecucion del 2? then”); 





return new Promise<Libro[]>((resolve, reject) => ( // (*) 


this.loggerService.log("Inicio ejecutor (Promise del 2? 


then)”); 
setTimeout (() => ( 


this.loggerService.log("Fin ejecutor (Promise del 2? 


resolve (libros); 
), 5000); 
153) 
.then( libros => 1 


this.loggerService.log("Ejecucion del 3? then"); 








this.libros = libros;)); 





Desde el navegador y su consola podremos comprobar la secuencia de 
ejecuciones. 


e - Hu 
Q Senicios x^ 
€ > C |O tocahost4200 w *| 
Libros: [Ri m foede Sora Nan Pote Memo P ps 


» El Quijote O | tp Wllójec © Defaultiewls * t item hidden by fiters | & 
* Hamlet (11:57:27) Inicio ejecutor (Promise de Librofervice.getlibros()) longer seryice.ts:7 
(11:57:32) Fin ejecutor (Promise de LibroService.getLibros())  — logzer.service.t2i7 
(11:57:32) Ejecucion del 12 thes logger.service.ts:7 
(11:57:32) Ejecucion del 2* then logger.service.t9:7 
(11:57:32) Inicie ejecutor (Promise del 2* then) logeer service.tsi7 
(11:57:37) Fin ejecutor (Promise del 22 then) logger.service.ts:7 
(11:57:37) Ejecucion del 3°% then logzer.service.ts:7 
>| 























El gran libro de Angular 205 


Servicios: Gestión 
asincrona con 

observables (Librería 

RxJs) (parte I) 

Los observables de las librerías RxJS (reactive ex- 

tensions for JavaScript) son otra herramienta que nos 
permitirá programación asíncrona. Veamos cuáles son 


las principales diferencias respecto a las promesas que 
veíamos en el anterior ejercicio: 





e Una promesa siempre devolverá un valor o 
un error, mientras que un observable puede 
emitir múltiples valores en el tiempo. Por este 
motivo, a veces se le define como un flujo de 
datos o "stream". 

e Una promesa no puede cancelarse, en cambio 
un observable sí. Si el valor esperado por una 
promesa (p. ej., el resultado de una llamada a 
un servicio) ya no es necesario, no hay manera 
de cancelar esa promesa. Siempre acabará 
llamándose a su "callback" de éxito o rechazo. 
En un observable no ocurre lo mismo, ya que 
siempre podemos anularlo cancelando la 
suscripción previa que se habría realizado. 





La sintaxis de una observable sería la siguiente: 





vObs = new Observable( /* ejecutor */ 
observer => ( ... ) /*o lo que es lo mismo: function(observer) { 
ps 


); 
vObsSubs = vObs.subscribe( 
value => ..., 


EEPYOY =F a. 
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La función ejecutor empieza a ejecutarse de forma asíncrona cuando un observador 
(u “observer”) realiza una suscripción en el observable. Esta suscripción se traduce 
en una ejecución al método “subscribe(observer)” del observable. En el caso que se 
realizara otra suscripción al mismo observable, se pondría en marcha otro hilo de 
ejecución asíncrona distinta. 


Una vez realizada la suscripción, el observador (u “observer”) recibirá cualquier 
dato emitido por el observable. En la suscripción al observable, es posible pa- 
sar una instancia del objeto observador que previamente haya creado, o pue- 
de pasar directamente las tres funciones de retorno o “callback” que lo 
definen: la primera es ejecutada al recibir nuevos valores, la segunda al recibir 
un error, y la última al recibir la notificación de finalización. Toda esa informa- 
ción será emitida por el observable usando los siguientes métodos del observa- 
dor: next(), error() o complete(). Para cancelar una suscripción ejecutaremos 
“unsuscribe()” sobre la suscripción. Esta cancelación siempre debe realizarse 
en suscripciones de observables que emitan valores de forma indefinida sin ter- 
minar nunca. En caso contrario, podrían producirse memory leaks (problemas de 
memoria). 


Los observables aquí explicados son los llamados cold observables, no emiten valores 
hasta que un observador se suscribe a ellos. Sin embargo, también existen los hot 
observables, que emiten valores aunque no haya suscriptores. Para más información 
consulte: http://reactivex.io/rxjs/manual/overview.html. 





Continuando la aplicación de los anteriores ejercicios, vamos a crear un nuevo ser- 
vicio "LibroObservableService" con un método "getLibros" que devuelva un obser- 
vable. El observable no devolverá todos los libros de golpe como hacía el servicio 
"LibroService", sino que irá devolviendo cadenas de libros cada segundo y me- 
dio añadiendo un nuevo libro en cada envío. Al final, enviará la notificación de 
finalización. 


1. Desde línea de comandos nos situaremos en ej100 angular/050 
servicios, y ejecutaremos la aplicación con ng serve. A continuación, 


abriremos el proyecto con el editor Atom. 


2. Desde la línea de comandos, crearemos el servicio LibroObservableService: 





Ej100 angularN050 servicios»ng generate service libroObservable 





Y le afiadiremos el siguiente código: 
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src/app/libro-observable.service.ts 


fInjectable() 


export class LibroObservableService { 


libros: LibroL]; 


constructor  J] 


getLibros(): Observable<Libro[1> ( 





return new Observable«Libro[]»( observer => ( 
let libros: Libro[] = []; 
observer.next([]);: 
LIBROS.forEach((libro, index) => ( 
setTimeout(() => ( 
libros.push(libro); 
observer.next (libros); 
), (index + 1) * 1500); 
)); 
setTimeout(() => ([observer.complete();], (LIBROS.length + 1) 


1500); 





A continuación registraremos el proveedor del servicio en app.module.ts, 
y finalmente modificaremos nuestro componente libro-lista.component. 
ts para que lo use: 


src/app/libro-lista/libro-lista.component.ts 


ngOnInit() ( 





this.observableSubs- this.libroObservableService.getLibros() 
.subscribe( 
libros => this.libros = libros, 


error => console.log(error), 





() => console.log(“this.libro0bservableService.getlibros () 
FINALIZADO”) 
); 
} 


ngOnDestroy()( if (this.observableSubs) this.observableSubs.un- 


subscribe(); } 
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3. Desde el navegador y su consola podremos comprobar la secuencia de 
elementos devueltos por el observable cada segundo y medio. 
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Servicios: Gestión 
asíncrona con 
observables (Librería 
RxJs) (parte II) 


Las librerías RxJS (reactive extensions for JavaS- 
cript) incluyen toda una serie de operadores que, 
combinados con los observables, pueden llegar 
a ser muy ütiles. El abanico de operadores es muy 
amplio, por lo que para facilitar su comprensión se 
suelen clasificar por categorías. En este capítulo ve- 
remos algunas de las categorías y operadores más 
usados. Si desea más información, le recomendamos 
que consulte la documentación oficial: http://reacti- 


vex.io/documentation/operators.html. 





Importante 





/ ^N 
/ O) ResdiveX - Operators o x a 





€ > C |O reactivexio/documentation/operators.htmi*categorized 





A 
Contents 


1 Operators By Category 


2, A Decision Tree of Observable Operators 
3, An Alphaberical List of Observable Operators 


Operators By Category 


Creating Observables 
Operators that originate new Observables. 


* Create — create an Observable from scratch by calling 
observer methods programmatically 

* Defer — do not create the Observable until the observer 
subscribes, and create a fresh Observable for each observer 

* Empty / Never / Throw — create Observables that have very 
precise and limited behavior 





Para cada uno de los operadores comentados hay un pequefio ejemplo. Si lo desea, 
puede implementarlos en un nuevo proyecto para ponerlos a prueba. Recuerde que 
para crear el proyecto seguiremos estos pasos: 


1. Nos ubicaremos en ej100 angular, y crearemos el proyecto tecleando 
ng new rxjs. Seguidamente lo renombraremos para que haga referencia a 
nuestro nümero de ejercicio ejecutando rename rxjs 053 rxjs, y finalmente 
pondremos en marcha la aplicación ejecutando ng serve desde la carpeta 
053 rxjs. A continuación, abriremos el proyecto con el editor Atom. 
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2. Los ejemplos los implementaremos en app.component.ts. Para verificarlos, 
sobre los observables realizaremos suscripciones que graben en log los 
valores obtenidos. Recuerde visualizar los log activando: “Más Herramientas/ 
Herramientas para desarrolladores” del menú del Google Chrome. 


Operadores de creación 


El operador create crea un observable que ejecutará la función específica cuando 
un observador se suscriba. 





vObs = Observable.create( /* ejecutor */ observer => [1 ... )); 


En el anterior capítulo lo habíamos visto hacer de otra forma (“vObs = new Observa- 
ble (..)”), pero el resultado final es el mismo. En los dos casos obtenemos un obser- 
vable con una función configurada. 


El operador interval crea un observable que emite números secuenciales (0,1,...) 
cada cierto intervalo de tiempo según lo que le hayamos indicado por parámetro. 
Vea el siguiente ejemplo: 





var source = Observable.interval(1000); //Emite secuencia 0, 1, 2, ... cada 1 


segundo 


El observador que se haya suscrito recibirá un número secuencial cada segundo. Mi- 
rar imagen. 


/ [^ mi x NIB 


€ > QC |Q localhost4200 








i Ix ó) | Blements Console Sources » 


Welcome g top Y Filter Default levels Y Y 





' Anguler is running in the core.es5. 1s:29325 
to app- | development mode. Coil enableProdMode() to enable 
| the production mode. 


e 200.cosponent.ts:32 
apD.componcnt.ts;22 
app.component.tc:32 
ano.cosponent.ts:32 
apno.componcnt,ts:22 
app.component.ts:32 
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El operador of crea un observable que emite los valores que se le hayan pasado por 
parámetro y finaliza emitiendo la notificación de finalización. 


var source = Observable.of('a','b','c'); //Emite secuencia 'a', "b' y 'c' 





El operador from permite crear un observable a partir de distintos objetos y tipos 
de datos. Las posibilidades son muy amplias. A continuación, puede ver un ejemplo 
donde partimos de una promesa que se resuelve en dos segundos devolviendo una 
cadena de caracteres, y otro donde partimos de un array: 


var source = Observable.from( 








new Promise«string»( (resolve, reject) => ( 
setTimeout(() => ( resolve("Valor resuelto por la Promise."); ), 2000); 
)) 


); 





var source = Observable.from([ínombre: “Miguel”, edad: 30), (nombre: "Juan', 


edad: 35)]); 


Operadores de transformación 


El operador map transforma los valores emitidos por un observable aplicando una 
función, y devuelve un observable que emite los valores transformados. 


var source = Observable.interval(1000).map(x => 2 * x); //Emite secuencia 0, 





25 4, 


Operadores de combinación 


El operador merge nos permite combinar varios observables en uno solo fusionan- 
do sus emisiones: 








var sourcel - Observable.interval(1000); 

var source2 - Observable.interval(1000).map(x => 10 * x); 

var source3 = sourcel.merge(source2); //Emite secuencia 0, 0, 1, 10, 2, 
20 eos 


En este ejemplo, el observador que se haya suscrito a "source3" recibirá O y O, el pri- 
mer segundo, 1 y 10, el siguiente segundo, ... y así sucesivamente. . 


El operador concat es similar a merge, pero en este caso el observable resultado de 
la fusión emite los valores de los distintos observables de forma ordenada: primero 
los del primer observable, luego del segundo, etc. 





var sourcel = Observable.of('a','b','c'); 
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var source2 = Observable.of('d','e','f'); 


var source3 = sourcel.concat (source2); //Emite secuencia a, b, c, d, e, f 


€ 3 Q |Q lacslhosr4200 % *| i 


a Ux Al] Elements Console Sources 9 ms 
Welcome 68 top v | Filter | Defaultieveis v € 











' Angular is running in tne core.es5.js:2975 
to app. development mode, Coll enableProd"bde() to enable 
The procuction mode. 

epp.component-ts:63 
apo conpenent, 15:63 
apo.component.ts:63 


a ita ET a aaa 


app. cosponent.ts:63 


Here are 
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Operadores de utilidad 


El operador do nos permite realizar una acción para cada uno de los valores emiti- 
dos por un observable, pero sin posibilidad de modificarlos. El operador devuelve 
un observable idéntico al de entrada. 


var source = Observable.of('a','b','c').do(x => console.log(x)); 


//Emite secuencia ʻa’, 'b' y "c', y muestra estos valores por log 
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Eo HttpClient: Introducción 
instalación 


Una aplicación web puede dividirse en dos grandes 

bloques: Front-end y Back-end. El Front-end es la 
parte que se muestra a través del navegador web, o sea, 
la parte que se encarga de interactuar con el usuario 
para recoger datos e información. El Back-end, por su 
parte, se ejecuta en un servidor y recoge a través de 
una API de servicios toda esa información para gestio- 
narla (guardarla en una base de datos, realizar compro- 
baciones, etc.). 





Web Server 
P ud 


BA c 


Aplicación Web en 
navegador 


Base de datos 





En la mayoría de casos, la comunicación entre aplicaciones Front-end y servicios 
Back-end se realiza mediante el protocolo HTTP. Para realizar este tipo de comu- 
nicación, las aplicaciones se apoyan en API como la interfaz XMLHttpRequest y 
la API fetch(), que son soportadas por la mayoría de navegadores web y permiten al 
Front-end realizar peticiones HTTP. 


Angular, por su parte, nos ofrece el servicio HttpClient. HttpClient es un servi- 
cio que proporciona una API simplificada, construida sobre la interfaz XMLHttpRe- 
quest, para realizar peticiones HTTP y procesar sus respuestas. En este sentido, el ser- 
vicio ofrece toda una serie de métodos para realizar los distintos tipos de peticiones 
HTTP que existen: 
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El servicio también aporta otros beneficios muy interesantes como son el soporte a 
la realización de test, soporte a la intercepción de peticiones y respuesta, una mejor 
gestión de errores, etc. 


HttpClient forma parte del módulo HttpClientModule del paquete Oangular/ 
common/http que tendremos que incluir en nuestra aplicación Angular. Hay que 
tener en cuenta que HttpClient está disponible en Angular 4.3.X y versiones 
posteriores. Para versiones anteriores existía un servicio parecido que se llamaba 
simplemente HTTP. 


Una vez realizada la introducción empezaremos nuestro ejercicio. En esta primera 
parte únicamente crearemos una aplicación con un único componente que habilita- 
remos para que pueda hacer uso del servicio HttpClient. En los siguientes ejercicios 
ya le añadiremos nuevas funcionalidades. 


1. Nos ubicaremos en ej100 angular, y crearemos el proyecto tecleando ng 
new http. Seguidamente lo renombraremos para que haga referencia a 
nuestro número de ejercicio ejecutando rename http 054 http, y finalmente 
pondremos en marcha la aplicación ejecutando ng serve desde dentro la 
carpeta 054 http. A continuación, abriremos el proyecto con Atom. 


2. Seguidamente afiadiremos los links de Bootstrap (https://v4-alpha.getbootstrap. 
com) en index.html para poder hacer uso de sus hojas de estilo. Consulte “087 
Bootstrap: Introducción" para obtener más información. 





3. Desde línea de comandos crearemos el componente HttpClientTest con el 
que trabajaremos: 





C:NEj100 angularN054 http»ng generate component httpClientTest 


:1Ej100_angular1054_http»ng generate component httpClientTest 

create src/app/http-client-test/http-client-test.component.html (35 bytes) 
create src/app/http-client-test/http-client-test.component.spec.ts (686 bytes) 
create src/app/http-client-test/http-client-test.component.ts (307 bytes) 


create src/app/http-client-test/http-client-test.component.css (0 bytes) 
update src/app/app.module.ts (432 bytes) 


*XFj100 angularVe54 http» 
:XEj100 angular|e54 http». 





A continuación, lo afiadiremos en el template del componente principal 
para poder visualizarlo en el navegador: 
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src/app/app.component.html 


«div class-"container"» 


<h3>Servicio HttpClient: ejemplos de uso</h3> 


«app-http-client-test»«/app-http-client-test» 


«/div» 





7 
€ > Q |0 localhost4200 


Servicio HttpClient: ejemplos de uso 


http-dient-test works! 











Para poder usar el servicio HttpClient en nuestros componentes, lo primero 
que tendremos que hacer es incluir el módulo HttpClientModule en 
nuestra aplicación Angular. Para ello, importaremos HttpClientModule en el 
módulo raíz de nuestra aplicación: 


src/app/app.module.ts 


import (HttpClientModule) from “*fangular/common/http'; 


fNgModule (1 

declarations: [ 
AppComponent 

l; 

imports: I 
BrowserModule, 
HttpClientModule 

l; 

providers: [], 

bootstrap: [AppComponent] 


}) 


export class AppModule { } 
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Finalmente, inyectaremos el servicio HttpClient en nuestro componente 
para que pueda usarlo: 





src/app/http-client-test/http-client-test.component.ts 


import ( Component, OnInit ) from “Bangular/core'; 


import ( HttpClient ) from “Rangular/common/http'; 


QComponent ((..) ) 
export class HttpClientTestComponent implements OnInit { 
constructor (private http: HttpClient) { ) 


ngOnInit() ( ) 
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oo HttpClient: Operaciones 
Get y Post 


En este ejercicio analizaremos los métodos get() y Importante 


post() de HttpClient. Estos métodos los utilizaremos 
para realizar peticiones HTTP tipo “get” y “post”, 
respectivamente. 





e GETO: para obtener un recurso del servidor. 
e POST(): para crear un recurso en el servidor. 
Para realizar pruebas con estas peticiones HTTP nece- fJ; aion 
n x : 2 > mtps//jsonpisceholder.typicode.com 
sitaríamos un servidor remoto que ofreciera una API f routes 
sobre la cual lanzarlas. Sin embargo, la creación de un 
à 2 " E All HTTP verbs are supported 
backend con una API no es el objetivo de este ejerci- jJ view usage exampies 
cio. Por este motivo haremos uso de JSONPlaceholder ] se 


^ X3 ISONPtacebolder - Fake : x AUR 





iposts 


(https://jsonplaceholder.typicode.com/), una API REST iposts/t 
püblica para realizar test. Usando esta API podremos ¡posts/1/comments 
gestionar “publicaciones”, que las podríamos definir ¡comments ?postid=1 
como ítems compuestos por un título, cuerpo y un A 


identificador de usuario. TNR 

Iposts/1 
Iposts/1 
En este ejercicio usaremos las siguientes rutas de la API: 


Iposts/1 


CUm C NE a 
COM 3 Obtención de todas las publicaciones 
POST Crear nueva publicación 


Para ver cómo funcionan los métodos get() y post(), vamos a crear ejemplos de uso en la 
aplicación que habíamos creado en el ejercicio anterior. Vamos a crear una función para 
obtener todas las publicaciones mediante el método get(), y otra para crear una nueva 
publicación mediante el método post(). También añadiremos botones en el template 
para poder llamar a estas funciones. Hay que tener en cuenta que la gestión que reali- 
Za el servidor remoto JSONPlaceholder con las peticiones de actualización es simulada. 
Por tanto, al realizar un post() recibiremos el identificador de la nueva publicación; sin 
embargo, si a continuación realizamos un get(), no recibiremos esa nueva publicación. 








1. En primer lugar, abriremos el proyecto 054_http con el editor (Atom), y 
pondremos en marcha la aplicación ejecutando ng serve desde la línea de 
comandos y desde la carpeta 054 http. 
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2. A continuación, añadimos las modificaciones en el componente: 





src/app/http-client-test/http-client-test.component.ts 
import ( Component, OnInit ) from “Rangular/core'; 


import ( HttpClient } from “*Rangular/common/http'; 


Component (1...) ) 

export class HttpClientTestComponent implements OnInit ( 
resultadoPeticion; 
constructor (private http: HttpClient) ( ) 
ngOnInit() ( this.get(); ) 


get() ( 
this.http.get("https://jsonplaceholder.typicode.com/posts') 
.subscribe( data => { this.resultadoPeticion = data; ) ); 
) 
post () [ 
this.http.post ('https://jsonplaceholder.typicode.com/posts', 
{ 
title: "Previsión Viernes.', 
body: "Parcialmente soleado.', 
userld: 1 


3) 


.Subscribe( data => { this.resultadoPeticion = data; ) ); 


src/app/http-client-test/http-client-test.component.html 


«hr» 


<h5>Petición:</h5> 
¿£¿diy class-"btnü-qroup" role-"group" aria-label="Basic example”> 
«button type-"button" class-"btn btn-secondary” 


(click)-2"get()"»Get«/button» 





«button type="button” class-"btn btn-secondary” 
(click)-"post()"»Post«/button» 
«/div» 
<hr> 
<h5>Resultado:</h5> 


«pre»((resultadoPeticion|json]])«/pre» 
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Finalmente, desde el navegador (http://localhost:4200) podrá probar las pe- 
ticiones pulsando el botón que desee en cada caso. 





[Qro PAN 
€ > C |O tocalnost4200 


Servicio HttpClient: ejemplos de uso 








Petición: 


Resultado: 
[ 
"userId": 1, 
"id: 1, 
"title": "sunt aut facere repellat provident occaecati excepi 
"body": "quia er suscipit insuscipit recusandae consequuntur 


"userId": 1, 

"105 2:2. 

"title": "qui est esse', 

"body": "est rerum tempore vitaeinsequi sint nihil reprehend: 


"userld": 1, 


[Gr ë owm 
€ > C [O tocamostezoo — 


Servicio HttpClient: ejemplos de uso 








Petición: 
2 


Resultado: 
( 


"title": "Provisión Viernes.”, 
"body": "Parcialmente soleado.", 
"userld”; 1, 

"id": 101 





Analizando la sintaxis de la llamada, seguramente ya habrá intuido que tanto get() 
como post() devuelven un observable sobre el que realizamos una suscripción. Y 
así es. Este y el resto de métodos de HttpClient para realizar peticiones HTTP devuel- 
ven observables de tipo cold. Esto significa lo siguiente: 


e [a petición no se realiza hasta que se hace una suscripción al observable 


devuelto. 
e Cada suscripción implicará una petición nueva. 
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Si desea más información de los observables consulte el capítulo “052 Servicios: Ges- 
tión asíncrona con observables”. 


Por otra parte, las API no siempre nos devolverán datos en formato JSON. Si este 
fuera el caso, deberíamos indicarlo al realizar la petición con la parametrización co- 
rrespondiente. Vea un ejemplo: 


this.http.get('/assets/ficheroTexto.txt”, [responseType: "text']) 


«subscribe (data => console.log(data)); 


El gran libro de Angular 221 





5. HttpClient: Operaciones 
put, patch y delete 


Continuando el análisis de métodos de HttpClient, en 

este ejercicio analizaremos los métodos put(), patch() y 
delete(), que usaremos para realizar peticiones HTTP de 
tipo “put”, “path” y “delete”, respectivamente. 


e PUTO): para actualizar un recurso del servidor. 

e PATCH(): para actualizar, de forma parcial, un 
recurso del servidor. Lo utilizaríamos cuando, por 
ejemplo, solamente necesitáramos actualizar una 
propiedad del recurso. 

e  DELETEY() para eliminar un recurso del servidor. 





Vamos a probar todos estos métodos sobre la aplicación con la que estábamos tra- 
bajando anteriormente. Para ello, haremos uso de las siguientes rutas de la API REST 
de JSONPlaceholder (https://jsonplaceholder.typicode.com/): 


Maod [ur — Descripción 
[PUT | /posts/:id Actualizar una publicación. 


PATCH /posts/:id Actualizar parcialmente una publicación. Ac- 
tualizar un TUTUP UP "X de propiedades. 


DELETE /posts/:id Eliminar una | Eliminar una publicación. — 





En los tres casos, “:id” correspondería al identificador de la publicación sobre la cual 
queremos realizar la acción. Vamos a realizar los cambios: 


1. En primer lugar, abriremos el proyecto 054_http con el editor (Atom), y 
pondremos en marcha la aplicación ejecutando ng serve desde la línea de 
comandos y desde dentro la carpeta 054_http. 


2. A continuación, añadimos las modificaciones en el componente: 
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src/app/http-client-test/http-client-test.component.ts 


Component ((...)) 


export class HttpClientTestComponent implements OnInit ( 


resultadoPeticion; 


constructor(private http: HttpClient) ( ) 


put () t 
this.http.put('https://jsonplaceholder.typicode.com/posts/1', 


{ 

aee. d. 

title: "Previsión Lunes’, 
body: "Lluvias.'; 

userId: 1 

)) 


.Subscribe( data => ( this.resultadoPeticion = data; ) ); 


} 
patch (){ 


this.http.patch('https://jsonplaceholder.typicode.com/posts/1"' 


{ 
body: 'Soleado." 


)) 


.subscribe( 


data => ( this.resultadoPeticion = data; ) ); 


} 


delete (1) 1 
this.http.delete ('https://jsonplaceholder.typicode.com/posts/1') 


.Subscribe( data => [ this.resultadoPeticion = data; ) ); 
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src/app/http-client-test/http-client-test.component.html 


«he 
<h5>Petición:</h5> 


<div class-"btn-group" role-"group" aria-label-"Basic example”> 


<button type="butt ] E tn-secondary" (click)-"put()"»Put«/ 


button» 
«button type-"button" class-"bt tn-secondary" 


(click)-"patch()"»Patch«/button» 

















«button type-"button" class-"btn btn-secondary" 





(click)-2"delete()"»Delete«/button» 
«/div» 
«hr» 


<h5>Resultado:</h5> 





<pre>(([resultadoPeticion|3json))</pre> 


Finalmente, desde el navegador (http://localhost:4200) ya podrá probar las 
peticiones pulsando el botón que desee en cada caso. 


Sm A 
€ 3 0/0 anoo ——— € > C |O babere 
Servicio HttpClient: ejemplos de uso Servicio HttpClient: ejemplos de uso 

















Petición: 


E Petición: 


Get | Post | Put Delete 
Resultado: 


1 Resultado: 


*id*: 3, 
"title": "Previsión lunes”, 
"body": "Lluvias.", “userId”; 1, 
"userId': 1 “193, 
} "title": "sunt eut facere repellat provident occaecati excepter 
"boty": "soleado." 








€ > C [9 inest 


L 





Servicio HttpClient: ejemplos de uso 
Petición: 
[cet | Post ea | pac [ea] 


Resultado: 
0 
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Por último, indicar que todas las peticiones HTTP que hemos visto también pueden 
realizarse mediante un único método genérico: request(). Veamos, por ejemplo, 
cómo podríamos realizar una petición “get” mediante el método request() en susti- 
tución del método get() que habíamos visto en el capítulo anterior: 


/* 

this.http.get ('https://jsonplaceholder.typicode.com/posts') 
.Subscribe( data => [ this.resultadoPeticion = data; ) ); 

€ 

this.http.request('GET','https://jsonplaceholder.typicode.com/posts') 


.Subscribe( data => ( this.resultadoPeticion = data; ) ); 
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A HttpClient: 
Configuraciones 
adicionales sobre las 
peticiones HTTP 


En este ejercicio analizaremos algunas configuraciones Importante 


adicionales que podemos aplicar a las peticiones HTTP 
antes de que se envíen al servidor remoto. Los ejem- 
plos que veremos los implementaremos sobre la apli- 
cación creada en los anteriores ejercicios, por lo que re- 
cuerde abrir el proyecto 054_http con el editor (Atom) 
y poner en marcha la aplicación ejecutando “ng serve” 
desde 054_http en línea de comandos. 





Añadir parámetros en el URL 


Normalmente, en las API existen algunos “endpoint” que aceptan parámetros que 
condicionan la operativa que se va a realizar. Por ejemplo, en el caso de la API REST 


JSONPlaceholder (https://jsonplaceholder.typicode.com/) que hemos usado en los 


anteriores ejercicios, existe una ruta mediante la cual podemos indicar que solamen- 
te queremos las publicaciones de un determinado usuario: 


Obtención de todas las publicaciones 





GET /posts?userI- | Obtención de las publicaciones del usuario 
d=:id con userld = :id 


Con HttpClient, podemos realizar llamadas con parámetros usando la clase Htt- 
pParams. Veamos cómo usarla a través de un ejemplo: 


1. Sobre nuestra aplicación, crearemos una nueva llamada get() para la ruta “/ 
posts?userId-:id" de JSONPlaceholder, indicando que queremos las publicaciones 
del usuario con "userId" = 9. Una vez introducido el código, realice la llamada 
desde el navegador y compruebe su funcionamiento. 
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src/app/http-client-test/http-client-test.component.ts 


import ( Component, OnInit ) from "'Gangular/core'; 


import ( HttpClient, HttpParams ) from "'Gangular/common/http'; 


Component ((...)) 


export class HttpClientTestComponent implements OnInit { 


get param() ( 
const params = new HttpParams().set('userId', '9'); 
this.http.get("https://jsonplaceholder.typicode.com/posts', 
(params]) 


.Subscribe( data => { this.resultadoPeticion = data; ) ); 


src/app/http-client-test/http-client-test.component.html 


«button type="button” class="btn btn-secondary" (oclick)-"get 


param()"»Get (userId-9) </button> 


SETE RR 
/ Y Http AN 
€ > Q |0locahost:1200 


Servicio HttpClient: ejemplos de uso 


Petición: 
Get | Post Put | Patch | Delete | Get(usarid=9) 





Resultado: 


[ 
t 


"usenTd": 9, 
“id”; 81, 
"title". "tempore rem veritatis volupts> quo dolores vero", 


"body": "facere qui nesciunt est voluptatum voluptatem nisi 


"userId": 9, 
siat: Y, 
"title": "laudartium voluptate suscipit sunt enim enim", 


"body": "ut libero sit aut totam inventore suntinporro sint « 





HttpParams es inmutable, lo que significa que las llamadas a sus métodos no 
modifican el objeto, sino que devuelven de nuevo. Por este motivo, en el anterior 
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ejemplo tenemos la creación y configuración del objeto HttpParams en una misma 
instrucción. Un código como el siguiente no crearía un objeto HttpParams como 
el anterior, sino que crearía dos objetos HttpParams (aunque, para el segundo, no 
habríamos guardado ninguna referencia): el primer objeto no tendría parámetros y 
el segundo tendría uno. 


const params = new HttpParams(); 


params.set('paraml', "valuel"); 


Afiadir cabecera personalizada 


En ciertos contextos necesitaremos afiadir cabeceras personalizadas en nuestras peti- 
ciones HTTP. Un claro ejemplo de ello se produce en determinados sistemas de segu- 
ridad. En ellos, necesitaremos afiadir una cabecera de autorización en todas las peti- 
ciones HTTP que realicemos. En esa cabecera, afiadiríamos un "token" (o password) 
que permitiría al servidor remoto identificarnos para que este haga sus gestiones o 
las deniegue. 


Con HttpClient, podemos afiadir cabeceras personalizadas usando la clase Ht- 
tpHeaders. Veamos un ejemplo: 


2. Afiadiremos una cabecera personalizada con un "token" de autorización 
sobre el método get param() que habíamos creado en el punto anterior. 





src/app/http-client-test/http-client-test.component.ts 

import { Component, OnInit ) from 'Gangular/core'; 

import ( HttpClient, HttpParams, HttpHeaders ) from '“Rangular/common/ 
MEL" 


Component ((...)) 


export class HttpClientTestComponent implements OnInit ( 


get param() { 


const headers = new HttpHeaders().set('Autorizacion', "mi token'); 

const params = new HttpParams().set('userId', "'9'); 

this.http.get("'https://jsonplaceholder.typicode.com/posts', 
(headers, params]) 


.Subscribe( data => { this.resultadoPeticion = data; ) ); 





Para comprobar que se ha afiadido la cabecera personalizada utilizaremos 
los log de Google Chrome, por lo que antes de realizar la llamada desde 
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el navegador, deberá seleccionar la opción “Más herramientas/Herramientas 
para desarrolladores/Network” de Google Chrome. 


Qu /— 0 x 
€ O |O iocaihostazoc 
-| Ux &l Elements  Corcole 


Get(userld-0) | [teme 


posts?userldz8 
Y porplaraholdar typicods com 





2 requests | 330 B transferred 


© S me Flø == 
| ilter la Regex LJ Fide doto URLs 


E xem ss Css (ms Medi Font Doc Ws Manifest Othe 
| me O ra tiO me 20 rre AMO me 400 vre 3 


ux 


Seurez Network » 


E) Greug &yframe | B Preserve lo 


* Headers Prewew ® 


Y Request Headers ^ 
thority: Isonolacengide 
imethod: GET 
ipath: ¿posts userld=9 
scheme: https 
aecept: applicationf3son, 
acept-encoding: gz1p, de 


ibnonematda d/^as1-7wc 
origin: ntto://1ocalnost: E 
referar: nttptr//iocalnert y 
user-agent "'czilla/5.0 ae 
Appicilabkit/537.236 (MM 
3163.100 Satari/537,.36 








Y Query Shing Parameters 


Hay que tener en cuenta que, igual que pasaba con la clase HttpParams, HttpHea- 


ders también es inmutable. 
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o HttpClient: Gestión de 
respuestas y errores 
de peticiones HTTP 


En este ejercicio analizaremos distintas gestiones que 
podemos realizar sobre respuestas de peticiones HTTP. 

Los ejemplos que veremos los implementaremos en 
la aplicación creada en los anteriores ejercicios, por lo 
que recuerde abrir el proyecto 054_http con el editor 


(Atom) y poner en marcha la aplicación ejecutando 
“ng serve” desde 054_http en línea de comandos. 





Definir tipos para las respuestas 


Normalmente, una petición HTTP devolverá una re- 

puesta en formato JSON que HttpClient se encargará de parsear en un objeto. Para 
que ese objeto tenga propiedades vinculadas a los distintos elementos de la respues- 
ta y así facilitarnos su gestión, será necesario que indiquemos a HttpClient el tipo o 
forma que tiene que tener. Veamos cómo podemos hacerlo implementándolo en las 
llamadas de nuestra aplicación: 


1. Primero crearemos la interface que defina nuestra respuesta, que en nuestro 
caso es una publicación. Crearemos el archivo post.ts y le añadiremos el 
siguiente código: 


src/app/post.ts 

export interface Post ( 
userId: number; 
id: number; 


title: string; 


body: string; 





2. A continuación, usaremos la interface para definir el tipo de respuesta en 
cada una de las llamadas. Esto, por ejemplo, nos permitirá que en la llamada 
a “post” podamos mostrar por log el identificador de la publicación creada 
accediendo a la propiedad “id” del objeto data: 
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src/app/http-client-test/http-client-test.component.ts 


import í Post ) Erom '../post'; 


this.http.get«Post[]»('https://jsonplaceholder.typicode.com/ 
posts) 


.subscribe( data => ( this.resultadoPeticion = data; ) ); 


this.http.post«Post»("https://jsonplaceholder.typicode.com/ 
posts^,ia]) 





.subscribe( data => ( this.resultadoPeticion = data; 


console.log("Id. de la nueva publicación: 
* + data. ld) 15 





Desde el navegador, pulsando la opción “post”, podrá comprobar su 
funcionamiento. 


/9 re Am 
€2C © localhost:4200 ] 
Servicio è E) tmeh Comoe » — |} xX 
HttpClient: to v | (Fiter | Defawt levels 
ejemplos de uso Eac - 


Petición: 


Get [Post Put Patch 


Resultado: 


( 
t 
"title"; "Previsión Viernes. 
"body": "Parcialmente solead 
"userid": 1, 
"1d": 101 








Leer la respuesta completa 


Por defecto, los métodos de HttpClient solamente devuelven la parte que forma el 
cuerpo (body) de la respuesta. Sin embargo, en algunos casos puede ser que nos 


interese ver la respuesta entera para consultar la cabecera o algün código de estado. 
Veamos cómo lo podríamos hacer. 
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3. Vamos a indicar en la llamada get() que queremos recibir la respuesta entera. 
Fíjese que, ahora, en la variable “resultadoPetición” debemos asignarle 
“data.body” y no “data”. 





src/app/http-client-test/http-client-test.component.ts 


this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts', 


[observe:' response! )) 


.Subscribe( data => { this.resultadoPeticion = data.body; console. 


log (data);) ); 





Desde el navegador podrá comprobar que al pulsar “get” recibimos el men- 
saje entero. 


€»d [O localhost:4200. 





Servicio |e EJ] cene cowo 9 li 
HttpClient: O | to Y | fille Default teves 


e htte-client-test. cogoonent, 15:17 

ejemplos de uso y irrptocponto (headerc: Htiphoedere, «totu 
>bady: (108) [(-], 1-2, 13, Cl, (2. El 
bhenders: HttgHenders (normalizrediianes 


Petición: nto 


stetus: 200 


| Gel] Post | Put | Patch a 


urls "nttos:// Jsonplacenolger.tyolcode, c 
b proto + MttpRocponso&aco 


Resultado: 


"userId": 1, 
*id": 1, 
"title"; "sunt eut facer 


"body*: "quia et suscipi 


"userid": 1, 
*id^: 2, 
"title": "quí est esse”, 


. >.» E 
hodu": "set narum tanna 5 
» 





Gestión de errores 


Los métodos de HttpClient devuelven observables, y tal como explicábamos en el 
capítulo de los observables (“052 Servicios: Gestión asíncrona con observables”), la 
gestión de errores se realizará añadiendo un controlador de error en la suscripción. 
Veamos un ejemplo. 


1. Vamos a ponerlo en práctica primero añadiendo un control de error en la 


llamada a “put”, y luego provocando un error fijando la actualización de 
una publicación inexistente (id publicación = 1.000): 
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src/app/http-client-test/http-client-test.component.ts 


this.http.put<Post>('https://jsonplaceholder.typicode.com/ 


posts/1000*" , L)) 
. subscribe ( 


data => { this.resultadoPeticion = data; }, 





err => { console.log(err); )); 


El error devuelto es de tipo HttpErrorResponse, y podemos obtener más detalles 
de ese error accediendo a sus propiedades. Por otra parte, en una petición HTTP se 
pueden producir dos grandes tipos de errores: error de cliente o red, o sea, error en 
el canal de comunicación, y error devuelto por el servidor remoto. Es recomendable 
que se gestionen por separado. Veamos cómo hacerlo. 


1. Para los errores de cliente o red, la propiedad “error” del objeto HttpErrorResponse 
es de tipo Error, por lo que para gestionar los dos tipos de error añadiremos el 
siguiente código: 


src/app/http-client-test/http-client-test.component.ts 


this.http.put<Post>('“https://jsonplaceholder.typicode.com/ 
posts/1000',(...)) 
.subscribe ( 

data => [ this.resultadoPeticion = data; ), 

(err: HttpErrorResponse) => { 


if (err.error instanceof Error) ( 








console.log("'Error cliente o red:', err.error.message); 
+ else i1 
console.log(^ Error servidor remoto. $(err.status) 4 ${err. 
message] ^); 
) 
)); 





Pulsando la opción "put" de la aplicación podrá comprobar cómo se gestiona co- 
rrectamente el error de publicación inexistente (http 404 not found). 


/Q re C bi Resultado: 





€ > Q |O locahost4200 


c Se: «rmm ED UD E “userId”; 
Servicio a ROSS 


HttpClient: | ! S PNE "title": "sunt aut facer 


1 
1, 


ejemplos de uso a as i "body": "quia et suscipi 
Miras: T POE PESE LA OEE 


Petición; Mo re “userte": 4, 
response far httpct/ /|«onelaconolaor tyo ds 2; 
Get Post Pub | Palch Acede.com/sczti/1099: 404 OK “title”: "qui est esse”, 


“body>. sect moenium temno 














El gran libro de Angular 233 





05 HttpClient: Intercepción 
de peticiones 
y respuestas 


Una característica importante del módulo HttpClient 
(“HttpClientModule”) es la intercepción, la posibili- 
dad de crear interceptores de mensajes entre el frontend 
y backend para poderlos modificar, monitorizar, etc. 


Importante 


Para crear un interceptor declararemos una clase de- 
corada con GInjectable() y que implemente la interfaz 
HttpInterceptor. La implementación de la interfaz 
requiere que añadamos el método intercept() en 
nuestra clase. Veamos un ejemplo de interceptor que 
simplemente realiza un log de la petición interceptada: 





QInjectable() 
export class TestInterceptor implements 
HttpInterceptor ( 


intercept (req: HttpRequest<any>, next: HttpHandler): 





Observable<HttpEvent<any>> { 
console.log(req); 


return next.handle (req); 


} 


El método “intercept” tiene dos parámetros de entrada: req (petición) y next (“si- 
guiente controlador”). El procedimiento sería el siguiente. El interceptor realiza las 
acciones que convengan sobre la petición interceptada (req) y realiza la llamada 
“next.handle(req)”. Esta llamada tiene que realizarse para que el resto de intercep- 
tores (en caso que los tuviéramos) procesen la petición y para que esta acabe reali- 
zándose. Por último indicar que la llamada “next.handle(req)” devuelve un observa- 
ble para la respuesta de la petición. Este observable también deberá devolverse por 
nuestro método “intercept”. 


Vamos a practicar con los interceptores en nuestra aplicación. Crearemos dos inter- 
ceptores. El primero añadirá un “token” de autenticación en la cabecera de la peti- 
ción. El segundo simplemente mostrará esta petición y su respuesta en el log. En el 
capítulo “057 HttpClient: Configuraciones adicionales sobre las peticiones HTTP” 
ya habíamos visto cómo añadir una cabecera de autenticación en una petición; sin 
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embargo, aquí, al hacerlo desde de un interceptor, podremos aplicarlo de forma au- 
tomática para todas las peticiones que realicemos. 


1 





Primero abriremos el proyecto 054 http con el editor (Atom), y, desde la 
carpeta 054 http, pondremos en marcha la aplicación ejecutando ng serve. 


Desde el editor (Atom), nos situaremos sobre la carpeta app y crearemos 
el fichero testInterceptor.ts. Dentro, afiadiremos el código del primer 
interceptor: 





src/app/testInterceptor.ts 


import { Injectable ) from "'Gangular/core'; 





import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest) 


from '(angular/common/http'; 


import ( Observable ) from "rxjs/observable'; 


QGInjectable!() 
export class TestInterceptor implements HttpInterceptor { 


intercept (req: HttpRequest<any>, next: HttpHandler): 





Observable<HttpEvent<any>> { 


const modReq = req.clone((headers: req.headers.set('tl - 





Autorizacion','token')]); 


return next.handle (modReq); 


De este código cabe destacar lo siguiente. Las clases HttpRequest y Ht- 
tpResponse son inmutables, no podemos modificarlos. Por este motivo, 
las modificaciones las realizamos sobre un clon o duplicado de la petición 
original. Esto es así para evitar que, en operaciones de reenvío, peticiones 
modificadas por la cadena de interceptores vuelvan a entrar, ya modificadas, 
por la misma cadena. 


Seguidamente crearemos el segundo interceptor "testInterceptor2.ts" con el 
siguiente código: 
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src/app/testInterceptor2.ts 


fAInjectable () 


export class TestInterceptor2 implements HttpInterceptor { 


intercept (req: HttpRequest<any>, next: HttpHandler): 





Observable<HttpEvent<any>> { 
console.log(req); 
return next 


.handle (req) 





.do(event => ( if (event instanceof HttpResponse) { console. 
log(event);) )); 
) 





El operador do() de la librería RxJS agrega un efecto secundario a un obser- 
vable sin afectar los valores en la secuencia. Aquí lo usamos para detectar el 
evento HttpResponse, o sea, la respuesta a la petición realizada, y mostrarlo 
por el log. 


4. Para activar los interceptores en nuestra aplicación deberemos configurarlos 
en el modulo principal. Esto lo haremos de la siguiente forma: 


src/app/app.module.ts 














import ( HTTP INTERCEPTORS ) from "'Gangular/common/http'; 


GNgModule(( declarations: [.], imports: [ie]; 





providers: [(í provide: HTTP INTERCEPTORS; ussClass; Testinterceptor, 





multi: true ), 




















( provide: HTTP INTE EPTORS, useClass: TestInterceptor2, 





multi: true ]],.. 


)). 





El orden establecido en la configuración de los interceptores determinará su 
orden de ejecución, por tanto, la petición que veremos en el log ya con- 
tendrá la cabecera de seguridad. 


5. Ejecutando las distintas llamadas implementadas podrá comprobar el 
funcionamiento de los interceptores. Por ejemplo, pulsando "post", podrá 
comprobar cómo aparecen petición y respuesta en el log. Además, si analiza 
la petición, podrá comprobar que incluye la cabecera de seguridad 
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€ 3 C |0 localhost:4200 








HttpClient: 
ejemplos de uso 


Resultado: 
t 


"title": "Previsión Viernes. 


"body": “Parcialmente solead: 


"userld": 1, 
"id": 101 


O | tp 


"UO | Filter] Delovi levels 


žestIntercestor2, ts: 19 
Mttpofequest (uri; 
hètos://jzonptocehotser. typicode.com/pos: 


testIstorceptor2.tc:13 


y Pttoresponse (headers: HttpHeaders, statu 


"https: //jsonpLocetotder. typicods.com/pos 
Y body: 
body: “Parcialmente soleaso,” 
id: 101 
title: "Provición Wiarnes.” 
userld: 1 
b proto : Object 
b headers: HttpHeaders [normalizedarmes: 
ok; true 
status: 201 
statusText: “or” 
type: 4 
urit "https ://&cnplacanolder.typicode.c 
b. oproto : MtpResponseñese 


Id. de htto-client-test.companent t1:27 
le nueva publicación: 101 


D ese x 





€ 3 C |0 localhost:1200 








Servicio 
HttpClient: 
ejemplos de uso 


Petición: 


Resultado: 
t 


"title"; "Previsión Viernes. 


“body”: “Parcialmente solead: 


"userId": 1, 
"id": 101 


"json", =} B 
> body: (title: "Previsión Viernes.", bel 
V headers: HttpHeaders 
v headers: Map(1) 
sizes (...) 
b rrotc : Map 
v [[Entríes]]: Array(1) 


izacion 


lezylnit; null 
laryüpdste: null 
b nornalizedWames: Map(1) C'ti sutoniz 
b peoto : Object 
methad: "POST" 
P parats: MrtpParams (updates: mill, cl 
reportProgrezs: false 
rezponcaType:. * $con* 
url; "https://jsonpleceholder.typicod 
urikitaPraress: "https: //jsonplncencide| 
witnCredentials: false 
b. proto. ; Object 


iextinterzentor2, tz: 
p lttsflesponse (heuders; Mttpticaders, sta 
ot: true, «f 


Id. http-client-test.component.ti:27 
de 1 sublicación: 191 
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e e e ^ 

HttpClient: Combinación 

e e e ^ 
y sincronización de 
peticiones HTTP. Eventos 
de progreso 
Los ejemplos que veremos a continuación, los imple- 
mentaremos sobre la aplicación creada en los ante- 
riores ejercicios, por lo que recuerde abrir el proyecto 
054 http con el editor (Atom) y poner en marcha la 


aplicación ejecutando “ng serve" desde 054 http en lí- 
nea de comandos. 





Lanzar peticiones HTTP en paralelo combinan- 
do su resultado 





Para lanzar varias peticiones HTTP en paralelo y combinar su resultado podemos 
usar el operador forkjoin de la librería RxJs. Veamos un ejemplo: 


1. Crearemos una nueva llamada para lanzar dos "get" sobre las publicaciones 4 y 5. 
src/app/http-client-test/http-client-test.component.ts 
peti paral() { 
Observable.forkJoin ( 
this.http.get<Post>('https://jsonplaceholder.typicode.com/ 
posts/4').delay(3000), 


this.http.get«Post»('https://jsonplaceholder.typicode.com/ 


posts/5') 








).subscribe( data => ( this.resultadoPeticion = data;) ); 


src/app/http-client-test/http-client-test.component.html 


«button type-"button" olass-"btn Dtn-secondary" (clrck)-"peti _ 


paral()"»Peti. Paral.</button> 





Una vez introducido el código, realice la llamada desde el navegador y compruebe 
su funcionamiento. Podrá comprobar que, pasados 3 segundos (debido al delay del 
primer "get"), se visualizan los datos. 


"forkjoin" nos permite combinar varios observables, obtenidos de peticiones HTTP, 
en un nuevo observable. Este último emitirá una cadena con el último valor emitido 
por cada uno de los observables cuando todos ellos hayan acabado. Si los observa- 
bles emitiesen más de un valor, solamente se tendría en cuenta el último. 
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/0 ver NON 
ese go localhost4200 





Resultado: 


“userId”: 1, 

*ig"; 4, 

"title": "eum et est occaecati", 

“body”: "ullam et saepe reiciendis voluptatem adipisciinsit an 


"userid": 1, 

"id"i 5, 

"title": "nesciunt quas odio”, 

"body"; "repudiandae veniam quaerat sunt sedinalias aut fugiat 





Lanzar peticiones HTTP en secuencia 


Un caso de uso común es el de lanzar una petición HTTP, recoger su resultado y, final- 
mente, usarlo para realizar otra petición HTTP. Esta secuencia de peticiones la pode- 
mos hacer usando el operador switchMap de la librería RxJs. Veamos un ejemplo: 


1. Crearemos una nueva llamada para obtener una publicación, modificarla y 
transferirla: 


src/app/http-client-test/http-client-test.component.ts 


peti sec( 
this.http.get<Post>('https://jsonplaceholder.typicode.com/ 
poste) 
.switchMap( data => { 
data.title = "(MODIFICADO) " + data.title; 
return 
this.http.put<Post>('https://jsonplaceholder.typicode. 

com/posts/1',data)]) 


.subscribe( data => ( this.resultadoPeticion = data;) ); 


src/app/http-client-test/http-client-test.component.html 


«button type-"button" class-"btn btn-sscondary" (olick)-"peti 


sec()"»Peti.Sec.«/button» 
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Una vez introducido el código, realice la llamada desde el navegador y compruebe 
su funcionamiento. 











Servicio HttpClient: ejemplos de uso 


Petición: 





| Get | Post | Put | Patch Delete | Get (userld-9) Peti. Paral 





Resultado: 
1 
"userId": 1, 
"ds 3, 
"title": "(MODIFICADO) sunt aut facere repellat provident occat 
"body": "quia et suscipitinsuscipit recusandae consequuntur ex| 


» 





“switchMap” es parecido al operador “map” que vimos en el capítulo 053. Sin em- 
bargo, debemos usar “switchMap” cuando la función de transformación devuelva 
un observable y “map” cuando devuelva un valor. 


Eventos de progreso 


Hasta este momento todas las peticiones HTTP que hemos visto se realizaban de for- 
ma muy rápida porque el tamaño de los mensajes transmitidos era muy pequeño. 
Sin embargo, habrá veces que necesitemos transferir un mensaje mucho más grande 
que necesite cierto tiempo. En estos casos, siempre es bueno poder indicar al usuario 
el progreso de esa transferencia. Para poder hacerlo, deberemos capturar los eventos 
de progreso y lo haremos realizando las peticiones con el método genérico “reques- 
t(HttpRequest)” (si desea más información consulte el capítulo 056) y la opción 
reportProgres. Veamos un ejemplo: 


1. Crearemos una nueva llamada que realizará un “post” y capturaremos los 
eventos: 
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src/app/http-client-test/http-client-test.component.ts 
post prgEvents() { 
const request = new HttpRequest("POST", "https:// 


jsonplaceholder.typicode.com/posts", (title: "Crítica de 


la película', body: 'Me ha gustado mucho.', userId: 1), 
[reportProgress: true]); 
this.http.request (request) 
.subscribe ( 


event => { 





if (event.type === HttpEventType.UploadProgress) { 
const percentDone = Math.round(100 * event. 


loaded / event.total); 


console.log( Fichero transferido en un 


$(percentDone]$^); 


) else if (event.type === HttpEventType.Response) { 


this.resultadoPeticion = event.body; 


src/app/http-client-test/http-client-test.component.html 


«button type-"button" class="btn btn-secondary" (click)="post 





prgEvents()"»Post (con Eventos Progreso)</button> 


Compruebe su funcionamiento. El mensaje del ejemplo es muy pequefio y con un 
solo log se indica que el fichero se ha transferido al 10096, pero con uno de más 
grande, veríamos más log de progreso de transferencia. 


€ > Q [O localnost4200 





| Ix 6] Elements Console » 
O top Y Fáter Defaultleveis ' 
testInterceptor2.ts:18 


> HttpRequest furt: 
"https: //Jsonpiaceholder. typicode.com/pos 


o | mE EE mee 
Peti Sec Post (con Eventos Progres testintercentor2.t5:13 





El gran libro de Angular 241 


Forms: Introducción 





Los formularios son uno de los elementos más impor- 

tantes en las aplicaciones de gestión ya que son, en 
esencia, los que nos permiten obtener y mostrar infor- 
mación para registrarla o realizar acciones a partir de la 
misma. 


En HTML disponemos de un buen conjunto de ele- 
mentos mediante los cuales podemos fabricar nuestros 
formularios, entre los que destacamos los siguientes: 
input, select, radio button, textarea, checkbox, 
buttons, etc. 





Los inputs poseen una gran variedad de tipos donde, además de los clásicos text, 
password y number, podemos enumerar los siguientes: color, date, dateti- 
me-local, email, month, range, search, tel, time, url, week, etc. En función 
del tipo de input indicado, se facilita el tratamiento del tipo de dato relacionado 
con el mismo. Por ejemplo, si indicamos un tipo number, veremos que en el input 
solo se pueden introducir números. 


Cada elemento puede llevar asociados una serie de eventos mediante los cuales po- 
demos realizar acciones, ya sea desde el propio template o desde su componente 
asociado. 


Los atributos más clásicos que pueden asociarse a muchos de los tipos son: value, 
disabled, max, maxlength, min, pattern, readonly, required, size, step. 


Una buena práctica es incluir cada campo en un div al que asociaremos la clase 


form-group y en el que definamos una etiqueta y el propio control a utilizar. Al 
control le asociaremos también la clase form-control. Veamos un ejemplo: 


<div class-"form-group"» 


«label for-"codigo"»Codigo«/label» 





«input type-"text" class-"form-control"» 


«f dw 
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En el siguiente ejercicio realizaremos una aplicación en la que incluiremos algún 
ejemplo de los elementos comentados anteriormente. 


1. 


En primer lugar, nos ubicaremos en Ej100_angular y crearemos el proyecto 
tecleando ng new formIntro. 


Seguidamente, renombraremos el proyecto ubicándonos en Ej100 angular, 
y escribiendo lo siguiente: 


C:NEj100 angular»rename formIntro 061 formIntro 


A continuación, abrimos el proyecto con nuestro editor y modificamos el 
título de la aplicación que se halla en la clase AppComponent del fichero 
app.component.ts: 





export class AppComponent { 


title = «5L formlutro'; 








Para usar las clases de Bootstrap, modificaremos el fichero app.compo- 
nent.html para que, de momento, tenga el siguiente contenido: 


«link rel-"stylesheet" href-"https://maxcdn. 
bootstrapcdn.com/bootstrap/4.0.0-alpha.6/ 
css/bootstrap.min.css" integrity-"sha384- 
rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 
AZzGRnGxQOKnKkoFVhFOhNUwEyJ" 
crossorigin-"anonymous"» 








<h1>((title))</h1><br> 


Ahora nos ubicaremos en 061 formIntro y arrancaremos la aplicación te- 
cleando lo siguiente: 


C:NEj100 angular»ed 061 formIntro 





C:NEj100 angularN061 formIntro >ng serve 


FO romintro 


€ > C 0][0 tocamos. QA E a i 


»| Otros marcadores 


061 formintro 
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A continuación, incluiremos los tags correspondientes al form y, dentro de 
los mismos, añadiremos el primer control de nuestro formulario que será 
por ejemplo “código”: 





«div class-"container p-1 mx-3 marco”> 
«form» 


«div class-"form-group"» 


«label for-"codigo"»Codigo«/label» 


«input type-"text" class-"form-control"» 
«/div» 


</form> 





</div> 
La clase marco la definiremos también en nuestro archivo styles.css con el 
siguiente contenido: 

.marco { 


border: 3px solid blue; 





Guardamos y actualizamos el navegador para ver cómo queda. 


JO fomno — x X 


€ > C 0 |O localhost4200 Q * 
» Otros marcadores 


061 formintro 





Codigo 





3. A continuación, añadiremos unos cuantos controles más para tener 
un formulario con una muestra de los controles más típicos. Así pues, 
añadimos un control para los campos nombre (input text), edad (input 
number)), opción (select), sexo (radiobutton), comentarios (textarea), 
activar (checkbox) y submit (button). 


4. Guardamos y actualizamos el navegador para ver cómo queda. 
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<div class="form-group”> [Dra Da aa 
E COO aA FP aei 
<label for="nombre">Nombre</label> E n | U ect 


<input type="text" class="form-control"> 061 formintro 
«aiv 





«div class-"form-group"» 
«label for="edad">Edad</label> 
<input type-"number" class-"form-control"» 


«/div» 


«div class-"form-group"» 
«label for="opcion">0pcion</label> 
«select class-"form-control"» 
«option»Uno«/option» 
«option»Dos«/option» 
«option»Tres«/option» 
</select> 


</div> 


<label>Sexo</label><br> 
«div class-"form-group"» 
«label»«input class-"mx-1" type="radio" checked-"true"»Hombre«/label» 


«label»«input class-"mx-1" type="radio">Mujer</label> 
«/div» 


«div class="form-group”> 
^ <label forz"comentarios"»Comentarios«/label» 
«div class-"textarea-btn-holder form-group form-group-replace"» 
«textarea class="form-control text-comment”></textarea> 


</div> 
</div> 


<div class="form-group”> 
<label><input classs"mx-1" type="checkbox" checked="true" >Activar</label> 


</div> 


«button type-"submit" class="btn btn-primary m-x-2"»Submit«/button» 





5. Seguidamente, añadimos el atributo placeholder al campo nombre para 
indicar al usuario qué es lo que hay que introducir en el mismo: 
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<input type-"text" class-"form-control" placeholder="Por 


favor, introduzca nombre." 


Añadimos al código una restricción para que no se puedan introducir más 
de 6 caracteres usando maxlength: 


<input type="text” class-"form-control" maxlength="6"> 


Incluimos un valor por defecto, un máximo y mínimo para la edad añadien- 
do los atributos value, min y max: 


<input type-"number" class-"form-control" value-"20" 


minz-z"15" max="65”> 


Codigo 


Juan Antonio Gómez 
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vo Forms: Obtención 
de valores 





Para acceder a los valores introducidos en los contro- 
les de un formulario, podemos utilizar diversos meca- 
nismos. Uno de los mecanismos es el uso de variables 
locales que hagan referencia a los controles. Para poder 
trabajar con las propiedades de un control añadimos 
en su tag la definición *nomVar, la propiedad name 
y ngModel. Por ejemplo, para un supuesto control de- 
nominado nombre, usaríamos una expresión como la 
siguiente: 


Importante 





<input type-"text" class-"form-control" ngModel name-"nombre" 





#nom> 


Podemos comprobar que es posible utilizar nom en nuestro template mostrando 
su valor mediante interpolación (nom {{ nom.value }}). Otra posibilidad es rea- 
lizar un binding (two-way data binding) para poder modificar el valor de una 
propiedad de forma bidireccional. Adaptando el ejemplo anterior, podríamos crear 
una variable name en nuestro archivo component.ts asociado al template y en el 
template definir lo siguiente: 


<input type=”text” class-"form-control" [(ngModel)]="nombre” 


name-"nombre"» 





En el siguiente ejercicio, usaremos los controles del ejercicio anterior 
(Forms Introduccion Controles). 


1. Nos ubicamos en Ej100 angular, crearemos el proyecto tecleando ng new 
formValores y, seguidamente, renombraremos el proyecto ubicándonos en 
Ej100 angular, y escribiendo lo siguiente: 





C:NEj100 angular»rename formValores 062 formValores 
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A continuación, copiamos los archivos src/app/app.component.html y 
src/styles.css del ejercicio anterior (formIntro) y los pegamos en nuestro 
proyecto 062_formValores reemplazando los existentes. 


2. Abrimos el proyecto y modificamos el título de la aplicación (dentro de 
app.component.ts): 





export class AppComponent { 


title = '062 formValores'; 





Ahora nos ubicaremos en 062 _formValores, arranca- FU > 
remos la aplicación y teclearemos lo siguiente: M EE, 


Ora ec adzin 


062 formValores 
Lar»ed 062 formValores 























larN061 formIntro >ng serve 


A continuación, vamos a afiadir una variable local para 
código definiendo lo siguiente: 


<input type-"text" class-"form-control" maxlengtnh-"6" 





name-"codigo" ngModel #cod> 


€ Hombre O Mujer 


Envolvamos el div que contiene el formulario en un —— 
row para mostrar 2 div: el div de formulario y el div 
que mostrará valores de la siguiente manera: 





«div class-"row p-2"» 





<div class-"container p-1 marco col-5"» 
«form» 
«!-- Contiene el form actual ==> 
</form> 
</div> 
«div class-"container col-5"» 


«!-- Para mostrar contenido de las variables 


--» 


«/div» 





«/div» 


El div que contiene el formulario ocupará 5 columnas (col-5) y en el div de 
variables incluiremos: 


Cod: {{ cod.value )) 
248 El gran libro de Angular 


Guardamos el archivo y observamos como se muestra el contenido del cam- 
po código. 





3. Ahora, obtendremos el valor del campo codigo y usando “two-way data 
binding” creando una variable en la clase App Component de la siguiente 
manera: 


export class AppComponent { 
title = '062 formValores'; 


codigo: string = “”; 





En nuestro tag input, introduciremos lo siguiente: 


<input type-"text" class-"form-control" maxlength-"6" 


[(ngModel)]-"codigo" name-"codigo" #cod> 





En el div donde mostramos valores, tendremos: 

<div class-"contailner col-5"» 
«!-- Para mostrar contenido de las variables --> 
Cod: (ff cod.value ))<br> 
Codigo: ff codigo )) 


</div> 





Guárdelo todo y observe cómo se ve en el navegador. 


062 formValores 


Todido Cod: 12345 








EC HEN Codigo: 12345 
| 12345 


Nombre 
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4. A continuación, crearemos una función (mostrarVar()) en nuestro 
componente, la cual, simplemente, mostrará por consola el contenido de la 
variable codigo de nuestro formulario y que asociaremos al evento change 
del control codigo. En la clase AppComponent añadiremos lo siguiente: 





export class AppComponent { 


title = '062 formValores'; 


y 


codigo: string - ; 


mostrarVar() { 


console.log("Codigo (" + this.codigo + ")"); 





En el tag input asociado al codigo afiadiremos: 


«input type="text” class-"form-oontrol" maxlength-"6" 
[ (ngMode1) ]="codigo” name-"codigo" #cod 


(change) ="mostrarVar () “> 





Muestre la consola (herramientas de desarrollador) del navegador (p. ej., en 
Google Chrome pulse ALT+MAYUS?+I) y visualice el contenido de código 
al introducir un valor y cambiar el foco. 


RA). tements Console » ix 
O top v | Fater. Default levels Y EY 


— 


Cod; 12345 ” 
Codigo: 12345 


5. Defina también nombre, edad, opción, sexo, comentarios y activar, 
añadiendo en cada uno el binding ([(MmgModel)|= “campo”), name 
(name=“campo”) y la llamada a la función mostrarVar() mediante el 
evento change. En el componente, añada una variable por cada campo 
a tratar, defina un valor por defecto y muéstrelos en la consola. Añada la 
función onSubmit para asociarla al evento Submit del formulario. 


062 formValores 





«div class="form-group”> «div class-"form-group"» 
«label for="nombre">Nombre</label> «label for="edad">Edad</label> 
«input type="text" class="form-control"” «input types"number" class="form-control" 
placeholder-"Por favor, introduzca nombre." values"20" mins"15" maxs"65" placeholder="Introduzca edad (15-65)" 


[(ngMode1)]="nombre” name="nombre” [(ngModel)]z"edad" name="edad" 
(change)s"mostrarVar()"» (change)-"mostrarVar()"» 
</div> </div> 





250 El gran libro de Angular 


<div class="form-group”> <label>Sexo</label><br> 
«label for-"opcion"»Opcion«/label» «div class="form-group”> 


«select class-"form-control" «label»«input class-"mx-1" type="radio" 
[(ngMode1) ]="opcion" name="opcion" [(ngModel)]="sexo" name-"sexo" value-"hombre" 
e clues mind . (change)-"mostrarVar()"»Hombre«/1label» 

<option value="1”>Uno</option> ^ g se A TAN 

«option valués"2*sDoscfoptibns <label><input class="mx-1" type="radio 

<option value="3">Tres</option> [(ngModel) ]="sexo" name="sexo" value="mujer" 
</select> (change)="mostrarvar()">Mujer</label> 


</div> </div> 


«div class-"form-group"» export class AppComponent f 
title = '862 formValores'; 
codigo:string=""; 
nombre:string=""; 


<label for="comentarios”>Comentarios</label> 
<div class-"textarea-btn-holder form-group form-group-replace"» 
<textarea class="form-control text-comment” adsd:fiunber 28 
[(ngModel)]-"comentarios" name-"comentarios" opcion:string="2"; 
(change)-"mostrarVar()"»«/textarea» comentarios:stringe""; 
«/div» sexo:string - "hombre"; 
«/div» activar:boolean - true; 
mostrarVar()( 
console. log( 
"Codigo ("+ this.codigo + ") " 
+ "Nombre (" + this.nombre+ ") " 
+ "Edad (" + this.edad+ ") " 
+ "Opcion (" + this.opcion+ ") " 
+ 
+ 
+ 


«div class="form-group”> 
«label»«input class-"mx-1" type="checkbox" 
[(ngModel)]-"activar" name="activar" 
(change)-"mostrarVar()" »Activar«/label» 
«/div» 


"Comentarios (” + this.comentarios+ ") 
"sexo (" + this.sexo* ") " 
"Activar (" + this.activar+ ")" 
5 
l 
onSubmit()1( 
console.log("Submit"); 
J 
} 





6. Muestre a través de la interpolación el contenido de las variables en el div 
creado a tal efecto. 


<div class="container col-5"> 
<!-- Para mostrar contenido de Las variables --> 
Cod: (( cod.value }}<br> 
Codigo: ff codigo ]]«br» 
Nombre: (( nombre }}<br> 
Edad: (( edad J)«br» 


Opcion: {{ opcion }}<br> 
Sexo: (( sexo }}<br> 
Comentarios: (ff comentarios ]]«br» 
Activar: {{ activar )) 
«/div» 





7. Por ültimo, asocie al tag form la llamada a onSubmit mediante el evento 
ngSubmit y cree una variable local (miForm) para el formulario: 


«form (ngSubmit)-"onSubmit()" 4miForm-"ngForm"» 
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Muestre la variable miForm (miForm (( miForm.value | json }}) apli- 
cando un pipe con json para ver el contenido del objeto en el div donde 
venimos mostrando los valores: 





Activar: 


{{ activar ))<br> 


miForm {{ miForm.value | json }} 


</div> 





Añada un valor a cada campo y compruebe cómo se muestra su contenido 
en el template y en la consola. Pruebe el botón Submit para ver que se eje- 


cuta la función de nuestro componente onSubmit. 


[aem AA 








€ > Q Ô |O kahat rif. Boo: 


062 formValores 





® Hombre 9 Mujer 


Comentarios 


Comentarios de pruebas 





ll Activar 


Cod: 123 

Codigo; 123 

Nombre: Juan Antonio 

Edad: 38 

Opcion: 1 

Sexo: hombre 

Comentarios: Comentarlos de 
pruebas 

Activar: false 

miform ( “codigo”: *123", 
"nombre": “Juan Antonio” 
"edad": 38, "opcion; "1", 
sexo": "hombre", 
"comentarios": "Comentarios 
de pruebas", "activar": false | 





»] Otros marcadores 





R G] | Elements Conse Sources Network » | į X 


O to Y | Fiter Default levels Y 2 items hidden by 





Angular is running in the development sode. 

Call enableProdMode() to enable the production mode, 
Codigo (123) Nombre () tded (20) app.romponent,tz:]14 
Opcion (2) Comentarios () Sexo (hombre) Activar (true) 
Codigo (123) Momhre (Juan Antonio) 

Edad (20) Opcion (2) Comentarios ) Sexo (honbre) 
Activar (true) 

Codigo (123) Nombre (Juan Antonio) 

Edad (38) Opcion (2) Comentarios b Sexo (hombre) 
Activer (true) 

Codigo (123) Nombre (Juan Antonio) 

tded (35) Opcion (1) Comentarios () Sexo (hombre) 
Actívar (true) 

Codigo (123) Nombre (Juon Antonio) 

tded (38) Opcion (1) Comentarios (Comentarios de 
prurebas) Sexo (hombre) Activar (true) 

Codigo (123) hombre (Jusa Antonio) 

Edad (3$) Opcion (1) Comentarios (Comentarios de 
prurebas) Sexo (hombre) Activar (false) 

Codigo (123) Nombre (Juan Antonio) 

Edad (38) Opcion (1) Comentarios (Comentarios de 
pruebes) Sexo (hombre) Activar (folse) 


Submit apog.component,ts:29 
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uz Forms: Estado 
de los objetos 





El estado de los objetos viene determinado por un 
conjunto de clases que nos permitirá averiguar si los 
objetos de un formulario han sido tratados o modifi- 
cados o sin son válidos o no respecto de sus posibles 
restricciones. 


Importante 


En el ejercicio destinado a validaciones veremos algu- 
nos de sus posibles usos, pero en este ejercicio, nos va- 
mos a dedicar a presentarlos y explicar cuál es la infor- 
mación que nos aportan. Los estados más importantes 
de un objeto están representados por alguna de las si- 
guientes clases: 


Un objeto posee varias clases asociadas simultáneamente, aunque algunas de ellas 
son incompatibles entre sí como pueden ser ng-touched con ng-untouched, 
ng-dirty con ng-pristine, o ng-valid con ng-invalid. 

























En el siguiente ejercicio realizaremos una aplicación sencilla en la que incluiremos 
algunos controles que nos ayudarán a entender el funcionamiento de estas clases. 


1. Nos ubicaremos en Ej100_angular y crearemos el proyecto tecleando ng 
new formEstado. 


2. Seguidamente, renombraremos el proyecto ubicándonos en Ej100_angular, 
y escribiendo lo siguiente: 
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C:NEj100 angular»rename formEstado 063 formEstado 


A continuación, abrimos el proyecto con nuestro editor y modificamos el 
título de la aplicación que se halla en la clase AppComponent del fichero 
app.component.ts: 


export class AppComponent { 


title = '063 formEstado'; 





Para usar las clases de Bootstrap, incluiremos en el fichero app.compo- 
nent.html lo siguiente: 

«link rel-"stylesheet" href-"https://maxcdn. 
bootstrapcdn.com/bootstrap/4.0.0-alpha.6/ 
css/bootstrap.min.css” integrity="sha384- 
rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 
AZzGRnGxQOKnKkoFVhFQhNUWEyJ" 
crossorigin-"anonymous"» 

<h1>([((title))</h1><br> 








Ahora nos ubicaremos en 063 formEstado y arrancaremos la aplicación 
tecleando lo siguiente: 


C:NEj100 angular»ed 063 formEstado 
C:NEj100 angular1061 formIntro >ng serve 








A continuación, incluiremos un div con los tags correspondientes al form y, 
dentro de los mismos, afiadiremos el primer control de nuestro formulario que 
será, por ejemplo, codigo. También afiadiremos otro div para mostrar las clases 
asociadas al control mediante className y también su propiedad value: 


«div class-"container-fluid m-1 p-1 marco"» 
«form tmiForm="ngForm”> 
«div class-"form-group"» 
<label for="codigo”“>Codigo</label> 
«input type-"text" class-"form-control" 
name-"codigo" ngModel tcodigo required» 
«days 
«form» 
«/div» 


«div class-"container-fluid fondo p-1 m-1"» 
Codigo clases: <b>{{ codigo.className ))</b><br> 





Codigo: <b>{{ codigo.value ))«/b» 
«/div» 
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Vemos que también hemos declarado una variable local para el form me- 
diante *miForm-"ngForm". Observe que, en esta ocasión, hemos inclui- 
do solo la propiedad ngModel y la variable local codigo para podernos 
referir al control. Las clases marco y fondo las definiremos en nuestro at- 
chivo styles.css con el siguiente contenido: 





.marco { 


border: 3px solid green; 


) 
ELondo- 1 
border: lpx solid red; 


background-color: lightblue; 





Guardamos y actualizamos el navegador para ver cómo queda. 


/Q roms. ¡NU | i u u M 
€ > C OO tamozixo **4*-HHeo: 


063 formEstado 





3. A continuación, afiadiremos algunos controles más (nombre, email y 
movil) para tener un formulario más variado y aprovechamos para agrupar 
los campos email y movil y mostrar un ejemplo de agrupación. Para 
agrupar varios campos, los incluiremos en un div al que asignaremos la 
propiedad ngModelGroup y también una variable local (contacto) con 
la que reconocer dicha agrupación: 


«div ngModelGroup-"contacto" tcontacto="ngModelGroup”> 


«div class-"form-group"» 

«label for-"nombre"»Nombre«/label» 

«input type="text" class-"form-control" name-"nombre" ngModel itnombre 
«/div» 


«div class="form-group”> 
«label for="email">Email</label> 


«input type-"email" class="form-control” name="email” ngModel ¿temail> 
«/div» 
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<div class="form-group”> 

<label for="movil">Movil</label> 

«input type-"number" class-"form-control" name-"movil" ngModel itmovil» 
«/div» 


«div ngModelGroup-"contacto" scontacto-"ngModelGroup"» 


«div class="form-group"> 
«label for="email">Email</label> 
«input type-"email" class-"form-control" name-"email" ngModel stemail» 
«/div» 
«div class-'"form-group"» 
«label for="movil">Movil</label> 
«input type-"number" class-"form-control" name-"movil" ngModel tmovil> 
«/div» 
</div> 





En el div donde mostramos las clases asociadas a cada control y su conteni- 
do, añadiremos una línea para cada control. 


<div class="container-fluid fondo p-1 m-1"> 
Codigo clases: <b>íf codigo.className )P</b><br> 
Nombre clases: «b»(( nombre.className ))</b><br> 
Email clases: «b»(( email.className j)«/b»«br» 
Movil clases: «b»(( movil.className ))</b><br> 
Codigo: «b»(( codigo.value ))</b><br> 
Nombre: <b>{{ nombre.value ))</b><br> 
Email : <b>{{ email.value ))</b><br> 
Movil : <b>{{ movil.value ))</b><br> 
Form : «b»(( miForm.value | json ))</b> 

</div> E E 





4. Guardamos y actualizamos el navegador para ver cómo queda. 


FO remos , AV 
€ 5 E CE 


063 formEstado 
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5. Podemos observar que el código muestra las variables: form-control ng- 
untouched ng-pristine ng-invalid. ng-invalid es mostrado porque 
hemos incluido el atributo required y, de momento, está vacío. ng- 
pristine se muestra porque el contenido del control no ha variado desde 
que se mostró el formulario por primera vez. Y ng-untouched se muestra 
porque aún no ha tenido el foco en ningún momento. 


6. Si hacemos clic con el ratón sobre el campo codigo e introducimos el valor 
‘T’, observamos como ahora aparecen otras clases, ya que el control ha sido 
tocado (ng-touched), se ha modificado su valor inicial (ng-dirty) y se ha 
convertido en válido (ng-valido), ya que es requerido y no está vacío. 


JO tortas NS 
€ 5 G0Í0 vcnetum 


063 formEstado 











7. Rellenemos el resto de controles (nombre, email y movil) y veamos cómo 
muestran sus valores el div del pie de página y también cómo se visualiza 
el contenido de cada uno de los controles del form gracias a la sentencia (f 
miForm.value | json }}. 





ETT EET TECH 
PO rmm LAN. i 
eso oDe — SN 


063 formEstado 
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voz Forms: Validaciones 





Las validaciones en los formularios son imprescindibles l ue 
para poder recoger la información con la calidad nece- pores 


saria antes de enviarla para su procesamiento posterior. 
Podemos realizar tantas validaciones como sean necesa- 
rias en cada uno de los controles que queramos y habi- 
litar o deshabilitar el botón Submit del formulario de- 
pendiendo de si hay o no errores en el formulario. 


En el siguiente ejercicio crearemos un formulario senci- 
llo solo con dos campos que nos permitirán analizar los 
detalles básicos y más importantes sobre las validaciones. 


T. 





Nos ubicaremos en Ej100 angular y crearemos el proyecto tecleando ng 
new formValida. 


Seguidamente, renombraremos el proyecto ubicándonos en Ej100 angular, 
y escribiendo lo siguiente: 








Ej100 angular»rename formValida 064 formValida 

Abrimos el proyecto y modificamos el título de la aplicación en el fichero 
app.component.ts: 

export class AppComponent { 


title = '064 formValida'; 





Para usar las clases de Bootstrap, incluiremos al principio del fichero app. 
component.html lo siguiente: 


«link rel-"stylesheet" href-"https://maxcdn.bootstrapcdn. 





com/bootstrap/4.0.0-alpha.6/css/bootstrap. 





min.css" integrity-"sha384-rwoIResjU2yc3z8GV/ 


NPeZWAv56rSmLldC3R/AZzGRnGxQOKRnKkoFVhFOQhNUwEyJ" 





crossorigin-"anonymous"» 


«hi»[([title))«/hl1»5«br» 
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Importamos FormsModule en el archivo app.module.ts y lo añadimos 
al bloque de imports. 


import { BrowserModule ) from '8angulac/platform-browser'; 


import ( NgModule from 'gangular/core'; 


( FormsModule ) from 'f 


import AppComponent |] from *./abp 


&fgModule( 

declarations: [ 
AppComponent 

Js 

imports [ 
BrowserModule, 

P 

providers: |], 


bootstrap: [AppComponent | 


export class AppModule { } 





3. A continuación, incluiremos 2 div en nuestro archivo app.component. 
html. Uno para definir el formulario y un control (código); otro para 
mostrar algunas propiedades de los controles y del formulario en sí. Tienen 
el siguiente contenido: 


«div class-"container-fluid marco p-1 m-1"» 
p 


«form fmiForm="ngForm”> 





«div class-"form-group"» 
«label for-"codigo"»Codigo«/label» 
<input type-"text" class-"form-control" 
name-"codigo" 
ngModel f£codigo-"ngModel" + codigo required» 
</div> 
</form> 
</div> 
<div class-"container-fluid fondo p-1 m-1”> 


«!-- Mostrar propiedades --> 


Codigo clases: <b>{{  codigo.className ))</b><br> 


Codigo: <b>{{ codigo.value ))</b><br> 





</div> 


En el archivo styles.css incluimos un par de definiciones como las siguien- 
tes para los div: 
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.marco ( border: 3px solid green; ) 





.fondo ( border: lpx solid red; background-color: 
lightblue; ) 





Ahora nos ubicaremos en 064 formValida y arrancaremos la aplicación 
tecleando lo siguiente: 


Ej100 angular»ed 064 formValida 








Ej100 angular N061 formIntro >ng serve 





Observe las clases mostradas en el div inferior y vea cómo cambian al intro- 
ducir un valor en el campo codigo. 


fy Fomvalida SC JW Fomvelca x WA 
€ > Q |Q tocalmost:4200 H esca [QD tocamosta200 * Mm: 
» 


064 formValida 064 formValida 








Codigo 


123 


4. Cuando el campo codigo está vacío, se muestra la clase ng-invalid. 
Eso denota que existe un error. Para verlo, añadimos un div y con *nglf 
lo mostramos, dependiendo de si hay o no error. Así pues, vamos a añadir 
debajo del control de codigo, lo que resaltamos a continuación: 





<input type-"text" class-"form-control" 


name-"codigo" 
ngModel tcodigo="ngModel” + codigo required» 


«/div» 


<div *nglf="codigo.invalid” class-"alert alert- 


danger"» 


codigo requerido 





«/div» 


Si el código es erróneo, se mostrará una alerta. 
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FO tomtñida NN Y 
€ > Q |Q localhost 








064 formValida 





Para evitar que la alerta se muestre por primera vez, añadiremos la condición 
de que haya tenido el foco al menos una vez. Para ello, modificaremos el 
*nglf de la siguiente manera: 





«div *nglf="codigo.invalid && codigo.touched" 


class-"alert alert-danger^» 





Ahora no se muestra la alerta hasta que seleccionamos el control y lo aban- 
donamos vacío. 

A continuación, añadimos otro requisito más al código para tener 2 posibles 
errores. Exigimos que el código tenga una longitud mínima de 3 caracteres 
añadiendo minlength-"3": 


ngModel tcodigo="ngModel” + codigo required 








minlength="3"> 


Ahora, matizaremos a qué error se refiere cuando se detecte que el código es 
inválido. Verificaremos si el código ha sido modificado o no. El código de 
nuestras alertas quedará de la siguiente manera: 


«div *nglf="codigo.invalid && (codigo.dirty || 
codigo.touched)”> 


<!l-- hay errores ==> 


<div *nglf="codigo.errors.required” class-"alert 


alertedanger”> 
codigo requerido 


</div> 


<div [hidden]="!codigo.errors.minlength” 


glass-"alert alert-danger”> 
Debe tener 3 caracteres como mínimo. 
</div> 


</div> 
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Además de *nglf visto para required, también podríamos usar [hidden] 
para mostrar o no el error del mínimo de caracteres dependiendo de si se da 
o no. Guarde el archivo y compruebe cómo funciona. 


/ o FeemValida x NIB 
€ > Q |Q locainasta200 





64 formValida 


Debe tener 3 caracteres como minimo. 





7. Añadimos un botón Submit antes del cierre del formulario para poderlo 
habilitar o deshabilitar en función de si todo el formulario es válido. 


nombre requerido 

</div> 

</div> 

«div class-"form-group"» 
«button type-"submit" class-"btn btn-success" 
[disabled]-"!miForm.form.valid"»Submit«/button» 

</div> 

</form> 
</div> 





8. Añadimos también un nuevo campo denominado mombre para tener 
dos posibles controles a validar y modificamos el div inferior (mostrando 
valores) para añadir nombre y el contenido de todo el form. 


«div class="container-fluid fondo p-1 m-1”> 
<!-- Mostrar propiedades --> 
Codigo clases: <b>{{ _codigo.className ))</b><br> 
Nombre clases: <b>{{ _nombre.className ))</b><br> 


Codigo: «b»(( codigo.value ))</b><br> 

Nombre: <b>{{ nombre.value ))</b><br> 

Form : «b»(( miForm.value | json ))</b> 
«/div» 





9. Observe que el botón Submit está deshabilitado gracias a la instrucción 
[disabled |-"!miForm.form.valid". Efectivamente, ambos campos son 
requeridos y ahora están vacíos. Introduzca un valor aceptable en cada 
campo y compruebe cómo se habilita el botón Submit. 
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f Fomvalida x wm 
€ > Q |O localhost:1200 


























064 formValida 














Juanto 
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Ls Forms: Validaciones 
personalizadas 





En ocasiones, necesitamos realizar personalizaciones algo más complicadas que las 
mencionadas en ejercicios anteriores. Para estos casos, podemos crear una valida- 
ción personalizada en la que, mediante una función, controlemos todos los detalles 
que sean necesarios. La idea es crear un archivo adicional que contenga la directiva 
que usaremos en la validación e importarla en el archivo app.module.ts. 


En el siguiente ejercicio crearemos una validación especial que consistirá en permi- 
tir introducir solo letras mayúsculas en el campo sobre el que la apliquemos. 


Para ello, utilizaremos de base el formulario desarrollado en el ejercicio anterior 
(formValida) y le añadiremos nuestra validación especial al campo nombre. 


1. En primer lugar, nos ubicaremos en Ej100_angular y crearemos el proyecto 
tecleando ng new formValidaEsp. 


2. Seguidamente, renombraremos el proyecto ubicándonos en Ej100_angular, 
y escribiendo lo siguiente: 








Ahora aprovecharemos algunos ficheros del ejercicio anterior (formVali- 
da) y copiaremos los siguientes archivos para pegarlos en nuestro proyecto 
en sus respectivas carpetas: 





..NSrCN styles.css 
. Asrclapplapp. component .html 
. .Asrclapptapp.module.ts 





A continuación, abrimos el proyecto y modificamos el título de la aplica- 
ción en el fichero app.component.ts: 


export class AppComponent { 


title = '065 formValidaEsp'; 
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Guardemos el archivo y abramos el navegador para comprobar que nuestro 
punto de partida es idéntico al punto en el que finalizó el ejercicio anterior 
y que la copia ha ido perfectamente. 


[I “mm 


E 0 eser. 


065 formValidaEsp 





3. Ahora, vamos a crear la directiva que nos permitirá realizar nuestra 
validación especial. Para ello, crearemos un nuevo fichero denominado srcN 
app validacaracteres.directive.ts con el siguiente contenido: 


import ( Directive ) from "'Gangular/core'; 
import ( AbstractControl, NG VALIDATORS ) from “fangular/ 


forms”; 


function filtrarCaracteres (caracter:AbstractControl){ 
if (caracter.value == null) return null; 
var contenido = caracter.value; 
for (var i = 0; i < contenido.length; i++){ 


var letra = contenido.substr (1,1); 





var valor = letra.charCodeAt (0); 
if (!(valor >=65 && valor <= 90)){ 


return (filtrarCaracteres: true); 


) 


return null; 


) 


QDirective(í 
selector: "[filtrar-caracteres]', 
providers:[ 
(provide: NG VALIDATORS, multi: true, useValue: 
filtrarCaracteres] 


] 





+) 


export class FiltrarCaracteres { 


) 





Lo más destacable en este archivo es la función filtrarCaracteres que será 
la que nos permitirá analizar cada uno de los caracteres introducidos en el 
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campo que estemos validando y determinar si 
dicho carácter es una letra mayúsculas o no. 

Para ello, nos basaremos en el código ASCII 
de cada carácter de forma que, si no está com- 


prendido entre 65 y 90, indicaremos que es un 
error (filtrarCaracteres: true). 


4. Una vez creada la directiva, hemos de incluirla 
en el archivo app.module.ts. 


import ( BrowserModule ) from 'gangular/platform-browser'; 
import ( NgModule ) from 'gangular/core'; 

import ( FormsModule ) from 'flangular/forms'; 

import { AppComponent ) from './app.component'; 


import ( FiltrarCaracteres ) from './validacaracteres.directive' 





fNgModule (4 
declarations: [ 
AppComponent, 


FiltrarCaracteres 


» 

imports: [ 
BrowserModule, 
FormsModule 

Ts 

providers: [], 

bootstrap: [AppComponent] 

» 





5. Seguidamente, añadimos nuestra directiva al campo nombre para que actué 
la validación de forma que nuestro input quedará de la siguiente manera: 


<input type-"text" class-"form-control" name-"nombre" 


ngModel f£nombre-"ngModel" + nombre required filtrar- 


Caracteres» 





Ahora, solo nos queda añadir una alerta que se muestre cuando se introduz- 
ca algún carácter que no sea una letra en mayúsculas. 


«div classs"form-group"» 
«label for="nombre">Nombre</label> 
<input type="text" class-"form-control" name-"nombre" 
ngModel fnombre-"ngModel" ft nombre required filtrar-caracteres» 
«div *ngIf-"nombre.invaliíd Ei (nombre.dirty || nombre.touched)”> 
<div *ngIf-"nombre.errors.required" class="alert alert-danger"» 
Nombre requerido 


</div> 

«div *ngIf="nombre.errors.filtrarCaracteres” class="alert alert-danger" 
Solo puede introducir letras de la A a la Z en mayusculas 

</div> 





6. Guarde el archivo y compruebe que, al introducir una letra en minúsculas, 
aparece un error indicando que no es posible. 
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7. Observe también que el error aparece si introducimos un carácter inválido 
en cualquier posición del campo. 


065 formValidaEsp 


AGA 


Solo puede inmoducy jetas de ia A a la Z en mapurción: 





8. Deje el campo vacío y compruebe que también se muestra el error de 
“Nombre requerido”. 


D65 formValidaEsp 





9. Observe también que el botón Submit no se habilitará hasta que todo el 
form contenga valores válidos. 


€ + CQ aho uno 





065 formValidaEsp 
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Forms: Reactive 





Los reactive forms o model-driven se diferencian 

de los template-driven en que la creación de los 
controles se hace en la clase del componente. Otra di- 
ferencia importante es que los reactive forms son 
síncronos mientras que los template-driven son 
asíncronos. Por otra parte, los reactive forms permi- 
ten añadir controles dinámicamente y facilitan los test 


unitarios. 


En la plantilla, simplemente definiremos los tags 
HTML correspondientes a los inputs, pero estos que- 
darán relacionados con la clase del componente gra- 
cias a formControlName y formGroupName para 
los controles y grupos de controles, respectivamente. 





En el siguiente ejercicio crearemos un formulario sencillo con cuatro campos de los 
cuales dos los trataremos de forma individual, y al final del ejercicio los otros dos 
formarán un grupo. 


1. Nos ubicaremos en Ej100_angular y crearemos el proyecto tecleando ng 
new formReactive. 


2. Seguidamente, renombraremos el proyecto ubicándonos en Ej100. 
angular, y escribiendo lo siguiente: 








Abrimos el proyecto y modificamos el título de la aplicación en el fichero 
app.component.ts: 


export class AppComponent { 


title = '066 formReactive'; 





Para usar las clases de Bootstrap, incluiremos al principio del fichero app. 
component.html lo siguiente: 
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<link rel="stylesheet” href="https://maxcdn.bootstrapcdn. 


com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” in- 


tegrity-"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/ 
AZzGRnGxQOKnKkoFVhFOQhNUwEyJ" crossorigin-"anonymous"» 








<hl>1[(titler</hl<br> 


Importamos ReactiveFormsModule (y HttpModule si no lo tenemos) 
en el archivo app.module.ts y lo añadimos al bloque de imports. 


import ( 8rowserModule ) from 'fangular/platform-browser*3 
import ( NgModule } froe 'Ba^gular/core'; 


import ( ReactiveFormsModule ] from "Rangular/forms'; 
import ( AppComponent ) from ',/app.component'; 


si MgModule( ( 
declarations: | 
AppComponent 
Js 
imports: [ 


BrowsarModule, 


ReactiveFormsModule, 
L 
providers: [], 
bootstrap: [AppComponent ] 
» 


export class App 





3. En app.component.html definiremos nuestro form y un primer control 
para codigo añadiendo detrás del título lo siguiente: 


«div class-"container-fluid marco p-1 m-1"» 
«form» 
«div class-"form-group"» 
<label for-"codigo"»Codigo«/label» 
<input type-"text" class-"form-control" tfcodigo> 
«/div» 
«/form» 
«/div» 
<div class-"container-fluid fondo p-1 m-1"» 


Codigo: {{ codigo.value ))<br> 





«/div» 
A continuación, incluiremos el siguiente código en el fichero styles.css: 


.marco { border: 3px solid green; ) 





.fondo ( border: 1px solid red;background-color: light- 
blue; ] 
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Seguidamente, en el archivo app.component.ts hemos de importar: 








import ( FormGroup, FormBuilder ) from '“Rangular/forms/ ; 


Dentro de la clase AppComponent, definiremos una variable para el form 
y usaremos el constructor para inyectar FormBuilder y poder crear un ob- 
jeto que represente los controles que va a tener nuestro formulario que, por 
el momento, solo tiene un código. La clase AppComponent contendrá lo 
siguiente: 


export class AppComponent ( 


title = '066 formReactive'; 


form: FormGroup; 





constructor (private fctrl: Form 
this.form=fctrl.group ({ 


codigo:'' 





Vemos la variable form que representa nuestro form y, dentro del construc- 
tor, creamos un grupo de controles que asignaremos a dicho form. 


4. Ahora, solo nos queda modificar el tag form de la siguiente manera: 
«form [formGroup]-'form'» 


Y el control de código para añadir formControlName, dejándolo así: 


<input type-"text" class-"form-control" formControlNa- 


me-"codigo" tcodigo> 


Salve todos los archivos y arranque la aplicación ubicándonos en C:NEj100 
angularN066 formReactive tecleando ng serve. Introduzca algún valor 
para ver cómo funciona. 


€ > C Ò |Qlocihost4200. Yr | A 


» Caros marcadores 


066 formReactive 
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5. A continuación, detrás del control codigo, insertaremos los campos nombre, 
aficionl y aficion2 en app.component.html. También añadiremos el 
botón Submit. 


«div class="form-group”> 
«label for="nombre">Nombre</label> 
«input type-"text" class-"form-control" 
formControlName-"nombre" #nombre> 
</div> 


«div class-"form-group"» 
«label for="aficion1">Aficion 1«/label» 
«input type="text" class-"form-control" 
formControlName-"aficion1l" ttaficion1> 
</div> 


<div class-"form-group"» 
<label for="aficion2">Aficion 2</label> 
<input type="text" class="form-control" 
formControlName-"aficion2" ttaficion2> 
</div> 


<div class-"form-group"» 
<button type="submit" class="btn btn-success"»Submit«/button» 





6. En el div inferior, añadiremos la visualización de los valores de los controles 
añadidos y del formulario en general. 


<div class="container-fluid fondo p-1 m-1"> 
Codigo: (( codigo.value ))<br> 
Nombre: (( nombre.value ))<br> 
Aficion 1: (( aficionl.value ))<br> 
Aficion 2: (( aficion2.value ))<br> 
(( form.value | json )) 

</div> 





7. En app.component.ts, también hemos de añadir la definición de los 
controles nuevos. 

export class AppComponent ( 
title - '066 formReactive'; 
form: FormGroup; 
constructor(private fctrl:FormBuilder )( 

this.form-fctrl.group(( 
codigo:'', 


nombre:'', 


aficionl:'', 
aficion2:'' 
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8. Guarde el archivo y compruebe cómo funciona en el navegador introduciendo 
algunos valores. 


n 


/e Formfeactye IO 


€ > 0 O |O cameo a] 4 











escribir 





9. Vamos a dar funcionalidad al botón Submit y, para ello, modificaremos el 
tag form para que contenga lo siguiente: 


«form [formGroup]-'form' (ngSubmit)-"onSubmit()"» 


En app.component.ts, añadimos la función onSubmit() dentro de la 
clase AppComponent. 


onsubmit() ( 
console.log("codigo . 
console.log("nombre . 
console.log("aficionl " + this.form.controls['aficionl'].value); 


* this.form.controls['codigo'].value); 
* this.form.controls['nombre'].value); 


console.log("aficion2 " + this.form.controls['aficion2'].value); 
console.log(JSON.stringify(this.form.value)); 





10. Introduzca algunos datos y pulse Submit para ver cómo se muestran dichos 
datos en la consola. 


11. Si quisiéramos agrupar los controles aficionl y aficion2 en uno grupo 
denominado aficiones, simplemente tendríamos que modificar el template 
para añadir un div que los agrupara, incluir la propiedad formGroupName, 
y modificar app.component.ts para afiadir esta agrupación en la creación 
del grupo y también en onSubmit para su display en la consola. Observe 
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cómo hemos definido unos valores por defecto al definir los controles en el 
constructor de AppComponent. 


ES Bm ft — 


D66 formReactive $5 == ms == =a + 


<div formGroupName="aficiones"> 


constructor(private fctrl:FormBuilder ){ 


insi bennieilitóniol-. M XA this.form=fctrl.group(([ 


«label for="aficion1">Aficion 1</label> 
«input type="text" class-"form-control" codigo:'123', 
formControlName-"aficionl" ttaficion1> nombre: 'Juanto', 
«/div» aficiones: fctrl.group(( 
«div class="form-group"> 
«label for-"aficion2"»Aficion 2«/label» 
<input type="text" classs"form-control" 
formControlNames"aficion2" Haficion2> » 
«/div» n 
</div> 


aficion1:'musica', 
aficion2:'escribir' 


onSubmit() { 
console.log("codigo . " + this.form.controls['codigo'].value); 
console.log("nombre . " « this.form.controls['nombre'].value); 
console.log("aficiones " « JSON.stringify(this.form.controls['aficiones'].value)); 
console.log("form " « JSON.stringify(this.form.value)); 





12. Observe también que, al pulsar Submit, se muestran los valores en la 
consola. 


[x ál | Elements Console Sources Network Performance Memory >» 











© |top v | Filter | Default levels Y 





Angular is running in the development mode. Call enableProdMode() to lang.js:130 
enable the production mode. 


codigo - 123 app.camponent.ts:23 


nombre . Juanto app.component .ts:24 
aficiones ("aficioni":"musica","aficion2":"escribir") app.component.ts:25 
form ("codigo" ;" 123" , "nombre": "Juento" , "eficiones": app.component.ts:26 
("aficionl":"musica","aficion2";"escribir"]] 
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uc Forms: Reactive 





validaciones 


Desca reado eybooks.com 


Las validaciones en los reactive forms se declaran en la definición de los controles 


con la siguiente sintaxis: 


campo: ['valor defecto” Validators.XXX] 


Si solo necesita una validación, XXX se indica dicha validación (p. ej., Validators. 
required). Sin embargo, si necesitamos aplicar varias validaciones, XXX contendrá 
la palabra compose y la sintaxis será la siguiente: 


codigo: ['valor defecto”, Validators.compose (| 


Validators.val 


idacionl, 








Validators.val 


Validators.val 





idacion2, 


idacion3 





1)1], 


En el siguiente ejercicio crearemos un formulario apli- 
cando validaciones a dos campos diferentes usando en 
cada uno las dos sintaxis comentadas. Para la realiza- 
ción de este ejercicio, usaremos como punto de partida 
el ejercicio anterior (formReactive) al que le quitare- 
mos los controles de aficiones para simplificar el códi- 


go comentado. 


1. Nos ubicaremos en Ej100 angular y crearemos 
el proyecto tecleando ng new formRValida. 


2. Seguidamente, renombraremos el proyecto 





Importante 





ubicándonos en Ej100_angular, y escribiendo 


lo siguiente: 








Ej100 angular»rename formRValida 067 formRValida 


Copiaremos los siguientes archivos del ejercicio anterior y los pegaremos 
dentro de nuestro nuevo proyecto en sus respectivas ubicaciones: 
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srcNstyles.css 


srcNappNapp.component.html 





srclapplapp.component.ts 


srcNappNapp.module.ts 





Una vez copiados, abrimos el proyecto y modificamos el título en el fichero 
app.component.ts: 


export class AppComponent { 


title = *067 formRValida; 





En app.component.html eliminamos todo lo referente a aficiones, es de- 
cir, el div que agrupaba los campos aficion1 y aficion2 y también elimina- 
mos la visualización de sus valores en el div inferior. Por tanto, solo queda- 
rán los controles código y nombre. Dejaremos el botón Submit tal y como 
está. A continuación, en el archivo app.component.ts hemos de importar 
la clase Validators: 


import ( FormGroup, FormBuilder, Validators ) from "'Q 


angular/forms'; 





Dentro de la clase AppComponent, dejaremos lo siguiente: 


export class AppComponent { 
title = '067 formRValida'; 


form: FormGroup; 





constructor (private fctrl:FormBuilder )( 
this.form=fctrl.group ({ 
codigo:'', 
nombre:'"' 
}) 
} 
onSubmit () { 


console.log (“codigo . this.form.controls["'codi- 





go'].value); 








sole.log("nombre . this.form.controls['nom- 





].value); 














sole.log(JSON.stringify(this.form.value)); 
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Arrancamos la aplicación y comprobamos nuestro formulario con los dos 
campos previstos. 


a x 


JO Forvo x^ wn 
RO eeeeoo SUMUS 
^ Oro mmecidores 


067 formRValida 





3. A continuación, afiadiremos un primer filtro al campo nombre para que 
este sea obligatorio, así: 


this.form-fctrl.group((í 
codigo:'', 
nombre:["'',Validators.required] 


+) 





En el archivo app.componment.html, debajo del input asociado al 
nombre, añadiremos un div que se visualizará condicionado a un *nglf 
que verificará si el campo mombre tiene errores y si ha tenido el foco al 
menos una vez (touched) o ha sido modificado (dirty). En caso de error, 
añadiremos una alerta: 
<div class="form-group”> 
<label for="nombre”“>Nombre</label> 


<input type-"text" class-"form-control" 


formControlName="nombre” 4nombre» 





«div *nglf="form.controls.nombre.errors && (form. 


controls.nombre.touched||form.controls.nombre.dirty)" 


class="alert alerrt-danger"» 
Nombre es obligatorio. 
«/div» 


«/div» 
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Añadiremos también la visualización de los errores asociados al campo 
nombre en el div inferior. 


«div class="container-fluid fondo p-1 m-1"» 


Codigo: (( codigo.value ))<br> 
Nombre: {{ nombre.value }}<br> 
(( form.value | json )) 

</div> 





4. En el navegador, nos situamos en el campo nombre y lo dejamos vacío (p. ej., 
pulsando TAB) y observamos que aparece el error. 


p o - n x 
J ramita A 
€ > C 0 Oranen $4 i 


=l | Otosmercadores 


067 formRValida 


Codigo 








A continuación, vamos a añadir algunas validaciones al campo código. En 
esta ocasión, tendremos que usar Validators.compose y definirlo de la si- 
guiente manera: 





constructor (private fctrl: Form 
this.form = fctrl.group(( 
codigo: ['”, Validators.compose ([ 
Validators.required, 
Validators.minLength (3), 


Validators.maxLength (6) 


Validators.required] 
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En este caso, además de indicar que el código también es obligatorio, vali- 
daremos que tenga 3 caracteres como mínimo y 6 como máximo. En el 
template, hemos de incluir debajo del input de codigo los div con los erro- 
res asociados. 


«label for-"codigo"»Codigo«/label» 
«input types"text" classs"form-control" 
formControlWame-"codigo" #codigo> 
«div *ngIfe"form.controls.codigo.errors 
(form. controls.codigo.touched||form.controls.codigo.dirty)"» 
«div *ngIf-"form.controls.codigo.errors.required" 
classs"alert alert-danger"» 
Codigo es obligatorio. 
</div> 
<div *nglfs"form.controls.codigo.errors.minlength" 
class-"alert alert-danger"» 
Codigo ha de tener 3 caracteres como minimo. 
</div> 
<div *ngIf="form.controls.codigo.errors.maxlength"” 
classs"alert alert-danger"> 
Codigo ha de tener 6 caracteres como maximo. 
</div> 
</div> 





5. Podemos comprobar que existe un primer div que se mostrará cuando 
existan errores (errors) y al mismo tiempo, el control haya tenido el foco 
alguna vez (touched) o haya sido modificado (dirty). Dentro de este div, 
tenemos un div para cada una de las posibles alertas: required, minlength 
y maxlength. 


[O rien A f y LO porro —— "WA 
€ +00 /Dworoz 44e: € >0 0 [Dusmu tP -met 


” Diva warten | o Oemar 


067 formRValida 067 formRValida 


€»c 0 |O tocanostazon 0 e E 








Otros marcadores 


067 formRValid 





Codigo 
| 1234567 





Codigo ha de tener ) csracteres como minimo. Codigo ho de tener 6 ennycteres como mormo 





Nombre 


Nombre 
En 





6. Podemos comprobar que, si introducimos un codigo válido y un nombre, 
el botón Submit se activa y si abrimos las herramientas de desarrollador (p. 
ej., con Google Chrome CTRL-MAYUS-I) veremos en la consola que se 
visualiza el contenido de los controles. 
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(& d]! demens Console Soos  Wetwok » 





O | p Y | [Fior Defaultlerci Y Y 
Angular is rumning in the development mode. lenz.i::1M 
Call enablaProdwoée() to enable the production made. 
codigo . 123456 App.coxponcnt.taiAn 
masbro . Juamto ApR-Componant. Es 224 
("codigo":"123456" "nombre" ;"Juento"] epp.corponent.ti:25 
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vo Forms: Reactive 
validaciones 
personalizadas 





De forma similar a como vimos en el caso de los for- 

ms template-driven, es posible realizar validacio- 
nes personalizadas apoyándonos en una clase auxi- 
liar que disponga de una función, la cual podemos 
desarrollar para que verifique de forma personalizada 
cualquier entrada de cualquier campo del formula- 
rio. En este caso, usaremos la misma función que fa- 
bricamos en el ejercicio formValidaEsp pero con 
algunos pequeños cambios. Recuerde que dicha fun- 
ción verificaba que todas las letras introducidas en 
el campo fuesen mayúsculas de forma que, si no lo 
son, generará un error. 





Para la realización de este ejercicio, usaremos como punto de partida el ejercicio 
anterior (formRValida) al que le añadiremos más funcionalidad relacionada con 
nuestra validación personalizada. 


1. Para facilitar el desarrollo del ejercicio, copiaremos el ejercicio anterior 067 _ 
formRValida sobre 068_formRValidaEsp. Podemos hacerlo a través del 
propio Explorador de Windows. 


© X =f 


loplar Eliminar Cambiar 
7 nombre carpeta 


> E100 angular £100 angular EN 
^ Nombre Nombre Nombre 


|, 067 formRValida 067 formRVebda 


0b! termRValida - copia |068 formRValdaEsp 


+ Copiar a EJTOO angular | 





2. Una vez copiado, abrimos el proyecto y modificamos el título en el fichero 
app.component.ts: 


280 El gran libro de Angular 





export class AppComponent { 


title = 


1068 formRValidaE 








Abrimos una ventana de CMD, nos ubicamos en el directorio de la aplica- 
ción y la arrancamos con ng serve: 








[O Fomina «UA i 
€ > C O |O locamost:1200 *i* Heo: 
» Otros marcadores 








068 formRValidaEsp 





C:NEj100 angular N068 formRValidaEsp»ng serve 
- ja] x 


A continuación, creamos un fichero llamado validacaracteres.ts bajo la 


carpeta app rc. 





Project 
| E 068 tormávalida£sp 
»9 y 
> Mn ele 
> (8 node modules 


Search in Directory 


| 


New Folder 





+ Enter the path hor tre new file. 
src NappWwalidacaracteres.ts 





Proyect 
v El 068 formRValidaEsp 
»9 9 
LEM E 
> (B) node modules 
vam 
Woo 
3 appcompooentcss 





3. Dentro del mismo, importaremos AbstractControl y crearemos la clase 
FiltrarCaracteres en la que definiremos el método que usaremos para nuestra 
validación y que llamaremos filtrarCaracteres. Así pues, el contenido del 
archivo validacaracteres.ts será el siguiente: 
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import ( AbstractControl ) from “Rangular/forms”; 


export class FiltrarCaracteres ( 
static filtrarCaracteres (caracter: AbstractControl) ( 

if (caracter.value == null) return null; 

var contenido = caracter.value; 

for (var i = 0; i < contenido.length; i++) ( 
var letra contenido.substr (i, 1); 
var valor letra.charCodeAt (0); 
if (! (valor >= 65 && valor <= 90)) ( 


return { filtrarCaracteres: true ); 





) 


return null; 





Lo que hacemos en el método es analizar cada uno de los caracteres 
recibidos en el parámetro caracter y ver si su valor ASCII está com- 
prendido entre 65 y 90, que son los valores correspondientes a A y Z, 
respectivamente. 


4. Seguidamente, modificaremos el fichero app.component.ts para importar 
la clase recién creada para la validación: 


import ( Component ) from "'Gangular/core'; 


import ( FormGroup, FormBuilder, Validators ) from "'8angu- 


lar/ forms” ; 


import ( FiltrarCaracteres ) from "./validacaracteres"; 


QComponent (( 
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Dentro de app.component.ts, modificaremos también el constructor para 
añadir al nombre la nueva validación, de forma que el constructor quedará 


de la siguiente manera: 











tructor (private fctrl: FormBuilder) ( 


this.form = fctrl.group(í 


codigo: ['*”, Validators.compose([ 


Validators.required, 


Validators.minLength(3), 











lidators.maxLength(6) 


[^ , Validators.compose([ 


Validators.required, 





FiltrarCaracteres.filtrarCaracteres 


1)1, 





Es decir, conservamos la validación required y añadimos la validación es- 


pecial filtrarCaracteres. 


5. Por último, tendremos que añadir las nuevas alertas en el template modificando 
el div asociado a los errores del nombre de la siguiente manera: 


«div class-"form-group"» 


«label for="nombre”>Nombre</label> 


«input type-"text" class-"form-control" formControl- 


Name-"nombre" *fnombre> 





«div *ngIf-"form.controls.nombre.errors && (form. 





controls.nombre.touched||form.controls.nombre.dir- 


ty) Hu. 


«div *nglf="form.coni 


trols.nombre.errors.requi- 


red" class-"alert alert-danger”> 





Nombre es obligatorio. 


</div> 
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«div *ngIf-"form.controls.nombre.errors.filtrar- 


Caracteres” class-"alsrt slert-danger" - 


Solo puede introducir letras de la A a la Z 


en mayusculas. 
</div> 
</div> 


xdg 





Guardamos el archivo y vemos que, en el navegador, al situarnos sobre el 
campo nombre y pulsar TAB dejándolo vacío aparece el error de Nom- 
bre es obligatorio, como ya teníamos en el ejercicio anterior. También 
podemos comprobar que si introducimos un carácter que no sea una letra 
en mayúsculas, bien sea al principio del campo o en cualquier posición del 
contenido del campo, nos mostrará el error de "Solo puede introducir 
letras de la A a la Z en mayusculas". 


[O ramas m LO rotar AN Y í 
€ + Q 0 0 toanovezoo ¡4 Me O: € +00 |Dioonoweco *¡4 ane: 








-| Orca mena -i Qvca minacdion 


068 formRValidaEsp 068 formRValidaEsp 








rt y 
€>00/Draraoo +4 a Me oi 
» | | Ovos made 


068 formRValidaEsp — — 








cla puede introducir letras de la A a ia Z en mayusculas, 
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6. Introduzca valores correctos en codigo y nombre y compruebe que se 
habilita el botón Submit, de forma que, al pulsarlo, se muestra en la 
consola de las herramientas del desarrollador del navegador (p. ej., 
CTRL+MAYUS+I en Google Chrome) los valores introducidos en el 
formulario. 


Q roris 


5a 
€»5Q00[|0snsom — ——— RA ALO 
068 formRValidaEsp * 








| pro do tbe A Laos 35:00 
anaklaProdhode() t» enable the production 
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Forms: LocalStorage 





Una de las tareas de los formularios es la de recoger datos y mostrarlos. Para ello, ge- 
neralmente se utilizan bases de datos que tratamos mediante servicios. Estos temas 
se tratan en otros ejercicios de este libro, pero a modo de recurso sencillo queríamos 
mostrar la posibilidad de almacenar datos en lo que se denomina LocalStorage 
que viene a sustituir a las antiguas cookies y que, en definitiva, se trata de un espa- 
cio que ofrecen los navegadores para almacenar entre 2,5 y 5 Mb de información. 
Podemos analizar el contenido de este espacio accediendo a las herramientas de de- 
sarrolladores (en el caso de Google Chrome en el apartado Application->Stora- 
ge->Local Storage). 


Para la realización de este ejercicio, usaremos como punto de partida el ejercicio 
anterior (066 formReactive) al que le añadiremos la funcionalidad necesaria para 
poder grabar y leer información de la LocalStorage. 


1. Para facilitar el desarrollo del ejercicio, copiaremos el ejercicio anterior 066 
formReactive sobre 069 formLocalStorage. Podemos hacerlo a través 
del propio Explorador de Windows. 


E x =f Th Nuevo 
l f) Fácila 
ar Eliminar Cambiar Nueva 


= nombre carpeta 


Organizar 


Ej100 angular 
Ej100 angular > Ej:00 angular 
Nombre 


I RANTA Nombre Nombre 
ll | formi eacbve 


, 066 formReactive 


+ Copiar a Ej100 angular 





2. Una vez copiado, abrimos el proyecto y modificamos el título en el fichero 
app.component.ts: 
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export class AppComponent { 


title = "069 formsLocalStorage'; 





Abrimos una ventana de CMD, nos ubicamos en el directorio de la aplica- 
ción y la arrancamos con ng serve: 


/a FormReactive AER 
€>5060 fà [O tocamostr4200 *+ +. Bco 


» Otros marcadores 


069 formsLocalStorage 


123 
Nombre 


Juanto 


Aficion 1 
musica 
Aficion 2 


escnbs 








C:NEj100 angular\069 formsLocalStorage>ng serve 


A continuación, modificaremos el archivo app.component.ts para añadir 
dos métodos que permitan grabar y leer datos sobre la LocalStorage de 
nuestro navegador. Primero, añadiremos el método grabarDatos() con el 
siguiente contenido: 





grabarDatos (){ 





localStorage.setItem("codigo", this.form.control 


'codigo'].value); 








localStorage.setItem("nombre", this.form.control 


['nombre'].value); 














localStorage.setItem("aficiones", JSON.stringify(- 





this.form.controls['aficiones' ] .value)); 





Para almacenar un valor, vemos que usamos la expresión localStorage.se- 
titem(clave, valor). 


3. Seguidamente, añadimos la función leerDatos() con lo siguiente: 
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leerDatos(){ 
this.form.patchValue (( 
“codigo”: localStorage.getItem("codigo") ? 


localStorage.getltem(“codigo”) : “” 





this.form.patchValue (( 
“nombre”: localStorage.getlItem(“nombre”) ? 
localStorage.getItem("nombre") : W 


)); 


this.form.patchValue (( 





“aficiones”: JSON.parse(localStorage.getlItem("afi- 


ciones”)) ? 


JSON.parse(localStorage.getItem("aficiones")) 


Mo 





Para leer los datos, usamos la expresión lo- 
calStorage.getItem(clave). En este caso 

usamos el operador Elvis (?) para inicializar el 
campo con un nulo (“”) en caso de que esté 
vacío en LocalStorage. 


4. Para asignar el valor al control usamos el 
método patchValue del objeto form 
(FormGroup). 


5. Ahora, incluiremos la llamada a 
grabarDatos() en el método onSubmit() 
justo después de la visualización de los datos 
por consola: 





288 El gran libro de Angular 





onSubmit () { 


NS 


console.log("codigo + this.form.controls['codi- 





go'].value); 





NS 


+ this.form.controls['nom- 





console.log(“nombre 


bre” ].value); 


console.log(“aficiones " + JSON.stringify(this.form. 





controls["'aficiones'].value)); 











console.log("form “ + JSON.stringify(this.form.va- 
1ue)); 





this.grabarDatos(); 





Incluiremos también la llamada a leerDatos() al final del constructor y aprovecha- 
remos para eliminar el valor por defecto que tenían los controles en su inicialización: 








constructor (private fctrl:FormBuilder) ( 





this.form = fctrl.group ({ 
codigo: V, 
nombre: “Y, 
aficiones: fctrl.group ({ 
aficionl: w; 
aficion2: V 


}) 
}) 


this.leerDatos(); 





A continuación, abrimos las herramientas de desarrolladores (p. ej., en Goo- 
gle Chrome CTRL-MAYUS-I). Introducimos un valor en cada control y 
pulsamos en Submit para ver los datos introducidos en la consola. 


"1 o LEA Y 
ES DO me 





069 formsLocalStorage 





El gran libro de Angular 289 


6. Dentro de las herramientas de desarrollador del navegador, buscamos el 
apartado Application y, dentro del mismo, el apartado de Storage -> 
LocalStorage -> http://localhost:4200. 





G E] Gee ce [as] > 
Application GO X fiter 
B manifest 
YE Service Workers 
B dear storage 





Storage 
v BB Local Storage 


> ši Session Storage 
B indexedog 
B web sor 

» Gb cookies 








7. Vamos a modificar el mombre mediante las herramientas de desarrollo 
haciendo doble clic sobre el mismo y poniendo otro contenido (p. ej., 
cambio “Juanto” por “Juan Antonio”). 





aficiones | ("aficion1":"leer" "aficion2":"correr”) 
codigo 123 





8. Si recargamos la aplicación en el navegador, observaremos como ahora se 


muestra el nuevo nombre, lo que nos demuestra que, además de grabar, 
podemos leer. 


E Le LAN N 


€ +00 0kaex 








069 formsLocalStorage 
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Wu MEAN: Desarrollos 
con MongoDB, Express, 
Angular y Node.js 


Tal como comentábamos en los primeros capítulos del 
libro, la principal característica de las aplicaciones sin- Importante 
gle-page application (SPA) que desarrollamos con An- 
gular es que la mayor parte de su funcionalidad se lleva 
al cliente (navegador Web). El código en servidor se usa 
básicamente para proveer de servicios a nuestro código 
cliente para, por ejemplo, dar acceso a una base de datos. 


Y así es si repasamos las aplicaciones que hemos ido 
desarrollando hasta este momento. En ningün caso, 
salvo en los ejercicios relacionados con el servicio Ht- 
tpClient, hemos necesitado de un backend. 





En la serie de ejercicios que empezamos ahora usare- 
mos MEAN stack para desarrollar una aplicación entera 
con un front-end Angular y un back-end de servicios 
REST de acceso a una base de datos. 


NODEJS 


MONGO DB + ANGULAR 
EXPRESS 





En el mundo del desarrollo web MEAN stack define el uso de un conjunto concre- 
to de tecnologías que permiten el desarrollo de todas y cada una de las partes de una 
aplicación. Estas tecnologías son: MongoDB, Express.js, Angular, Node.js. To- 
das ellas se empezaron a usar de forma conjunta por un motivo muy simple y prác- 
tico: todas ellas utilizan JavaScript como lenguaje de programación. Esto facilita 
mucho el desarrollo y es el principal motivo de éxito de MEAN stack. 


Vamos a ver un poco en qué consisten las tecnologías MongoDB y Express que no 
habíamos visto hasta ahora. 


MongoDB 


Tradicionalmente, las aplicaciones siempre han tra- moneo 
bajado con bases de datos relacionales como son - 
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Oracle, Sql Server, MySQL o PostgreSQL. Cada una de ellas tiene sus particularida- 
des, pero al fin y al cabo todas ellas trabajan con tablas, columnas, claves primarias, 
consultas SOL, etc. 


Estos sistemas son muy fiables, sin embargo, pueden tener problemas de rendimien- 
to y escalabilidad en aplicaciones que gestionan volúmenes muy grandes de datos y 
que son usadas por muchos usuarios a la vez. 


Es por este motivo que aparecieron las bases de datos NoSQL. De entrada, la prin- 
cipal diferencia respecto a las bases de datos es que NoSQL es una forma de almace- 
namiento no estructurado: no hay tablas, no hay registros ni tampoco consultas 


SQL. 


Existen muchos sistemas de bases de datos NoSQL y la mayoría son de código abier- 
to. Cada uno de ellos tiene sus particularidades y pueden ser muy diferentes en- 
tre ellos, sin embargo podemos considerar que existen cuatro tipos diferentes según 
como almacenan y gestionan los datos: orientadas a documentos, orientadas a co- 
lumnas, de clave-valor y en grafo. 


En MEAN stack la base de datos usada es MongoDB. MongoDB es una base de da- 
tos orientada a documentos, es decir, los datos se guardan en documentos y no 


en registros. Estos documentos se almacenan en BSON, que es una representación 
binaria de JSON. 


Una de las principales diferencias con las bases de datos relacionales es que los do- 
cumentos de una misma colección (concepto similar al de tabla en una base de 
datos relacional) no tienen por qué seguir un esquema. Por ejemplo, para una colec- 
ción “Usuarios” podríamos tener dos documentos como los siguientes: 


{ Nombre: “Julian”, Hijos: [{ Nombre:”Isabel”, Edad:6},{ Nombre:”Alberto”, 


Edad:2}]} 








{ Nombre: “Ramon”, Apellidos: “Lopéz”, Hijos: 3} 


Como vemos, los esquemas son totalmente diferentes. El segundo documento tie- 
ne un campo nuevo, y el campo “Hijos” es de tipo distinto al del otro documento. 
A pesar de esto, es importante diseñar un esquema para nuestras colecciones para 
facilitar su gestión. De hecho, el esquema lo definirán las consultas que vayamos a 
realizar con más frecuencia. Ejemplo: db.Usuarios.find((Nombre: “Ramon”)); 


Express 


Express es un framework de desarrollo de aplicaciones 
web para la plataforma Node.js. Su configuración bási- OXD res $ 
ca es la siguiente: 


292 El gran libro de Angular 


e Creación de la aplicación Express y configuración del puerto para la entrada 
de peticiones de clientes. 


const app = express(); 


var server = app.listen(8080, function()( console.log('Listening... `); 


e Configuración de las llamadas a funciones middleware para el procesamiento 
de las peticiones. Ejemplo: 


app.use((req, res, next) => { console.log('Petición recibida.'); 





next ();)); 
app.get('/usuarios', function(req, res, next)í 


//res.send("«Datos de usuarios»'); 





var err = new Error("'«Datos del error>'); next(err); 
)); 
app.post('/usuarios', function(req, res, next)( res.send('Usuario 


creado');)); 








app.use((err, req, res, next) => [ console.log('Error!'); res.status(500). 


send (err.message);)); 





Una llamada a una función de middleware consta de los siguientes elementos: mé- 
todo HTTP para el que se aplica la función, vía de acceso (ruta) para la que se aplica 
la función, y la propia función middleware. 


Las funciones middleware tienen acceso al objeto petición (req), al objeto respuesta 
(res) y a la siguiente función middleware (next), y las tareas que suelen realizar son 
las de: 


Ejecutar código. 
Realizar cambios en la petición (req) y respuesta (res). 

e Finalizar el ciclo petición/respuesta respondiendo al cliente mediante los 
métodos del objeto "res". 

e  [nvocar la siguiente función middleware en la pila ejecutando “next()”. 


Cuando Express recibe una petición, se ejecuta la primera función middleware que 
aplique según método HTTP y ruta de la petición. Por ejemplo, para una petición 
"post" en "/usuarios", el código anterior ejecutaría la primera y tercera funciones 
middleware, y el cliente acabaría recibiendo el texto “Usuario creado”. Y para una 
petición "get" en "/usuarios", el mismo código ejecutaría la primera, segunda y 
cuarta funciones middleware, y el cliente acabaría recibiendo un error de tipo 500 
(internal server error) con el texto “<Datos del error”. 
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WVA MEAN: Creación de la 
aplicación Express 





Este es el primero de una serie de ejercicios que nos vm 
permitirá construir una sencilla aplicación MEAN para e 
poder realizar la gestión (alta, baja, consulta y modifi- 


cación) de "tareas" almacenadas en una tabla de base 
de datos MongoDB. 


El backend de la aplicación lo desarrollaremos con Ex- 
press.js, y estará formada por una API de servicios REST 
para la gestión de las "tareas" de la base de datos Mon- 
goDB. Por otra parte, el frontend lo desarrollaremos 
con Angular, y estará formada por dos vistas: una prin- 
cipal con el listado de tareas y las distintas opciones de 
gestión, y otra para crear o modificar una tarea. 





En este primer ejercicio construiremos la estructura básica de la aplicación. Partien- 
do de un proyecto Angular, configuraremos una aplicación Express.js que hará las 
funciones de servidor web. La aplicación gestionará todas las peticiones que le lle- 
guen desde el navegador, ya sea para dar acceso a la API de servicios, o para enviar la 
aplicación Angular al navegador. 


1. En primer lugar, nos ubicaremos en Ej100 angular y crearemos el 
proyecto ejMean. 


:VEj100 angular»ng new ejMean 

create ejMean/e2e/app.e2e-spec.ts (289 bytes) 
create ejMean/e2e/app.po.ts (208 bytes) 

create ejMean/e2e/tsconfig.e2e.json (235 bytes) 
create ejMean/karma.conf.js (923 bytes) 

create ejMean/package.json (1312 bytes) 

create ejMean/protractor.conf.js (722 bytes) 
create ejMean/README.md (1022 bytes) 





2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro nümero de ejercicio: 








Ej100 angular»rename ejMean 071 ejMean 
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3. A continuación, nos ubicaremos en 071 ejMean y arrancaremos la 
aplicación para comprobar cómo funciona en nuestro navegador. Para ello, 


teclearemos lo siguiente: 





Ej100 angular»ed 071 ejMean 





Ej100 angular X071 ejMean»ng serve 


Q ins x V 
€ Q | Q tocsilhost4200 


Welcome to app! 





4. Desde la ventana de CMD, realizaremos un ctrl+c para parar la aplicación. 
Una vez termine, pasaremos a instalar los módulos express y body-parser 


en nuestra aplicación: 


C:NEj100 angular1071 ejMean»npm install -save express 





body-parser 


:1Ej100_ angular1071_ejMean>npm install -save express body-parser 
ej-meange.0.0 C:1Ej109 angularl071_ejMean 

-- body-parserg1.18.2 
"-- express(M.16.2 


1.3: wanted ["os":"darwin","arch":"any") (current: (^"os^":"win32","arch":"x64^]) 
iU Gschematics/angularg0.0.49 requires a peer of fangular-devkit/schematics; 
0.0.34 but none was installed. 





5. Una vez terminada la instalación, abriremos nuestro proyecto con nuestro 
editor (en nuestro caso Atom), y crearemos el archivo server.js en la raíz 
de nuestro proyecto. Luego, afiadiremos su código: 
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server.js 


// Get dependencies 





const express - require('express'); 
const path = require('path'); 
const http = require( 'http'); 


const bodyParser = require( 'body-parser'); 


VMIMMMBMMMIMMP IA AA IA AA IA ADD NADA IA AIN AAA IA INIA INS 


// Creamos la aplicacion express y la configuramos... 


const app = express (); 


// Parsers for POST data 
app.use (bodyParser.json()); 


app.use(bodyParser.urlencoded(( extended: false ))); 


//Cfg. del directorio “dist” como directorio estatico. 


//En este directorio tendremos los archivos obtenidos en el 


build de nuestra aplicación Angular 


app.use(express.static(path.join(  dirname, "dist'))); 


//C£g. de las rutas 
app.get('/api”, (req, res) => ( 
res.send('La API funciona'); 


)); 


app.get('*', (req, res) => ( 


res.sendFile(path.join(  dirname, "dist/index.html')); 


)); 


//Cfg. del puerto de escucha 
const port = process.env.PORT || '3000'; 


app.set('port', port); 


//Creamos el servidor http con la aplicación express y abrimos 


puerto 
const server - http.createServer (app); 


server.listen(port, () => console.log( API running on 
localhost:$(port))); 





6. El código anterior establece una simple aplicación Express con las 
siguientes características: 
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a. Puerto de escucha de peticiones: puerto 3000. 

b. La devolución de un texto para las peticiones que le lleguen por la ruta “/ 
api”. 

c. La devolución de la página dist/index.html (página principal de 
nuestra aplicación Angular) para las peticiones que le lleguen por 
cualquier otra ruta. 

7. Antes de ejecutar nuestra aplicación Express, deberemos realizar un build 
para generar la archivos de la aplicación Angular en la carpeta /dist: 





C:NEj100 angularí071 ejMean»ng build 





Es importante tener en cuenta que, a partir de ahora, siempre que modifi- 
quemos la aplicación Angular, deberemos realizar un "ng build" para actua- 
lizar la carpeta /dist, de tal manera que la aplicación Express envíe siempre 
la última versión al navegador. Es recomendable salir del editor Atom al ha- 
cerlo, ya que si no pueden producirse errores de permisos. 


8. Finalmente ejecutaremos nuestra aplicación Express de la siguiente manera: 





Ej100 _angular1071 ejMean»node server.js 





9. Desde el navegador llamaremos a la aplicación por el puerto 3000. Por 
defecto, la aplicación Express nos devolverá la aplicación Angular. Pero si a 
la ruta añadimos “/api”, nos devolverá el texto codificado. 


/ Q tive AN Y | / Q tocatros13000/293 NER 
€ > Q |O localhost:3000 ; I € 3 Q |O localhost2000/api 
La API funciona 
Welcome to app! 
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Upi MEAN: Instalación 
y configuración 
de MongoDB 


En este ejercicio nos centraremos en el subsistema 
MongoDB del MEAN stack, o sea, en el tipo de base de Importante 
datos que se usa en las aplicaciones MEAN. Descarga- 


remos MongoDB, lo instalaremos, configuraremos y 
finalmente añadiremos el código necesario en nuestra 
aplicación para que se conecte a MongoDB. 


1. El primer paso será descargar el instalador 
de MongoDB en nuestro ordenador desde la 
siguiente página: https://www.mongodb.or 


downloadss&production 





En esta página, seleccionaremos la 
opción que más nos interese segün 
nuestro SO. En nuestro caso, selec- 
cionaremos la opción Windows — 
Server 2008 64-bit, without SSL A 
support x64 que es la versión para : 
Windows Vista o superior. Una vez a 
seleccionada la opción adecuada, 
descargaremos el instalador y lo eje- 
cutaremos seleccionando las opcio- 
nes por defecto. 


ny 








Welcome to the MongoD8 3.4.6 (64 bi] 
5d up Wind 


Hie com herd d enl Feet 0 e 
SU IA. QUE e coto Cana l at ba Saag 
Tui 


Rosae Ur dll Mosa B 3.66 ($8 dar) a 


eel m mpa e nhá mns Lind n he mmm o remp o pri 
dus ARS END 
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2. Una vez instalado el producto, pasaremos a crear el servicio Windows 
MongoDB. Este servicio nos permitirá que el servidor de base de datos 
MongoDB se ponga en marcha automáticamente cada vez que reiniciemos 
el ordenador. 


3. Para ello, primero crearemos la siguiente estructura de directorios 
desde una ventana CMD o, si se prefiere, desde un Explorador de Windows. 


C:\>mkdir mongodbNdataNdb mongodbidatallog 


4. A continuación, crearemos el fichero CiAimongodb1datamongodb.cfg 
con el siguiente código: 





systemLog: 
destination: file 
path: C:imongodbidatallogimongod. log 


storage: 





dbPath: C:MmongodbNdataNdb 





Este es el fichero de configuración que se aplicará a nuestro servidor Mon- 
goDB. En él estamos indicando las carpetas y ficheros que se usarán para los 
datos y ficheros log. 


5. Finalmente crearemos el servicio ejecutando el comando siguiente: 


C:\Program Filesimongodb1ServerY3.4lbin>mongod.exe -config c:\ 


mongodb\data\mongodb.cfg -install 


:MProgram Files\MongoDE\Server\3.4\bin>mongod.exe -config c:\mongodb\data\mongodb. 
cfg -install 


:\Program FilesWMongoDB1Server13.4bin>,, 





Hay que tener en cuenta que debemos hacerlo como usuario Adminis- 
trador (botón derecho sobre el icono de “Símbolo del Sistema” [CMD] y 
pulsar “Ejecutar como administrador”) y que mongod.exe puede variar 
de ubicación según la versión que hubiéramos instalado en el paso 1. 


6. Ahora pasaremos a verificar que se haya creado el servicio accediendo a 
la ventana “Servicios” de Windows desde el menú Windows o ejecutando 
services.msc desde CMD. Para poner en marcha el servicio podemos pulsar 
Iniciar desde esta misma ventana o hacerlo reiniciando el ordenador. 
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+> Daas amene 
3 Servicios (locales) 





MongoDB 


Iniciar el servicio 


Descripción: 
MongoDB Server 


Nombre. 
"Llamada a pro... 
66 Microsoft NET. 
Y% Microsoft NET 
¿4 Microsoft NET- 
¿3% Microsoft NET.. 
5 Microsoft Offi... 
1$ Microsoft Offi... 
4 Módulos de cx... 
Ei MongoDB 

'54 Motor de filtra... 
{$ Mozilla Maint.. 
' Net Logon 

4 NetMsmq List- 
W NetPipe Liste... 
T$ Net Tcp Listen... 
Ü Net Tcp Port S- 


Descnpeción 


El servicio RPCSS es... 


Microsoft .NET Fra... 
Microsoft .NET Fra.. 
Microsoft NET Fra.. 
Microsoft NET Fra... 


Ejecutar parte de lo... 


El servicio IKEEXT h. 
MongoDB Server 

El Motor de filtrad... 
El servicio de mant... 
Mantiene un canal — 


Receives activation ... 
Receives activation ... 
Receives activation ... 


Provides ability to s... 


Estado 
Iniciado 


Iniciado 


Iniciado 


hipo de inicio 
Automático 
Manual 
Manual 
Automático (i... 
Automático (i... 
Manual 
Manual 
Automático 
Automático 
Automático 
Manual 
Manual 
Deshabilitado 
Deshabilitado 
Deshabilitado 
Deshabilitado 


Iniciar sesión cor ê 
Servicio de red 
Sistema local 
Sistema local 
Sistema local 
Sistema local 
Sistema local 
Servicio local 
Sistema local 3] 
Sistema local 
Servicio local 
Sistema local 
Sistema local 
Servicio de red 
Servicio local 
Servicio local 
Servicio local 


a n Online Iniciado Automático Sistema local 
4 + 
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En estos últimos apartados del ejercicio añadiremos el código necesario en 
nuestra aplicación MEAN para que realice la conexión al servidor de base 
de datos MongoDB. Primero instalaremos el módulo mongoose, que es la 
librería que usaremos para conectarnos a MongoDB: 





C:NEj100 angular\071_ejMean>npm install -save mongoose 


:XEj108 angularX071 ejMean»npm install -save mongoose 
ej-meange.e.e C:1Ej100_angular1071_ejMean 

-- mongooseĝ4.13.4 

4-- async@2.1.4 

+-- bsonfB1.0.4 

+-- hooks-fixed@2 .0.2 

4-- kareemĝ1.5.0 

4-- lodash.getg4.4.2 





8. Una vez terminada la instalación, abriremos nuestro proyecto con nuestro 
editor (Atom), y añadiremos el siguiente código en el archivo server.js: 


var mongoose = require( “mongoose”); 


JILIIN ANTTIA IAIA TIITII MM III 
// Conexión a la base de datos MongoDB a traves de Mongoose 


var dbURI = *mongodb://localhost/db mean'; 


mongoose.connect(dbURI, (useMongoClient: truej); 
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// Configuracion de los eventos de la conexión Mongoose 
mongoose.connection.on( “connected”, function () { 
console.log( “Mongoose default connection open to * + dbURI); 


w; 


mongoose.connection.on( “error”, function (err) { 
console.log( “Mongoose default connection error: * + err); 


35 


mongoose.connection.on(*disconnected?, function () ( 
console.log(*Mongoose default connection disconnected"); 


35 


// Si el proceso “Node” termina, se cierra la conexión Mongoose 
process.on( ‘SIGINT’, function() { 
mongoose.connection.close(function () { 
console.log( “Mongoose default connection disconnected through app 


termination’); 
process.exit(0); 
5 
5 
VEMM AAA AAA AAA UULU 
// Creamos la aplicacion express y la configuramos 





9. Con este código nuestro servidor realiza la conexión a la base de datos 
MongoDB y configura la gestión de eventos principales para interceptar las 
conexiones/desconexiones que se produzcan en la base de datos. 


10. Finalmente ejecutaremos nuestra aplicación de la siguiente manera: 





C:NEj100 angular N071 ejMean>node server.js 





Desde la propia ventana de CMD deberíamos ver el texto correspondien- 
te al evento "connected", que indicaría que la conexión se ha realizado 
correctamente. 


*XEj1ee angularie71 ejMean»node server.js 
API running on localhost:30600 
ongoose default connection open to mongodb://localhost/db mean 
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(parte I) 


574. MEAN: Creación 
de la API Restful 


En este ejercicio construiremos la RESTful API de nuestra aplicación, implemen- 
tando los casos CRUD (Create/Read/Update/Delete) para crear/ver/editar/borrar las 
"tareas" de nuestra base de datos. En la siguiente tabla se muestran los 5 endpoints 
que vamos a implementar y que definirán nuestra API: 


HTTP URL 

GET /api/tareas 

POST /api/tareas 

GET /api/tareas/:tareald 
PUT /api/tareas/:tareald 
DELETE /api/tareas/:tareald 


Descripción 

Devuelve todas las tareas 
Crea una tarea 

Devuelve una tarea 
Modifica una tarea 


Borra una tarea 


Para construir la API seguiremos el patrón de diseño MVC (Modelo-Vista-Controla- 
dor). MVC separa datos y lógica de negocio de una aplicación, respecto su interfaz 
de usuario. Para ello, propone la construcción de estos tres componentes: 
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Modelo: representa los datos y lógica de negocio 
de la aplicación. En nuestro caso, el modelo 
quedará representado por una entidad “Tarea” 
con las propiedades y métodos necesarios. 

Vista: elemento con el que interactúa el usuario. 
En nuestro caso, al ser una API, el usuario va a 
ser otro componente software y la vista van a 
ser los endpoints disponibles y los datos que 
devolvemos (archivos JSON). 

Controlador: hace de intermediario entre la 
vista y el modelo: pide datos al modelo para 
devolvérselos a la vista, y realiza acciones sobre 
el modelo cuyo origen se produce en la vista. 


Importante 








Vamos a empezar con el ejercicio: 


1. Abriremos el proyecto 071_ejMean con el editor Atom y, en la raíz de nuestro 
proyecto, crearemos los directorios “server”, “server/controllers”, 


“server/models” y “server/routes”. 


v E 071_ejMean 
> a dist 


> a ele 
> Bi node modules 


v Wi server 


> E controllers 


> EM models 

> EE routes 

B src 

8 angular-clison 
i editorconfig 

o Jgitignore 

X karma.conf.s 
q package.json 
(0) protractor.conf js 
EE README.md 





m server.js 


2. A continuación, crearemos las rutas o endpoints de nuestra API. Para 
hacerlo, primero crearemos el fichero tarea.js en la carpeta routes, y luego 
le afiadiremos el siguiente código: 


server/routes/tarea.js 


module.exports = function (app) Í 


var tareaCtrl = require('../controllers/tarea'); 


app.route('/api/tareas') 
.get(tareaCtrl.list all tareas) 


.post(tareaCtrl.create tarea); 


app.route('/api/tareas/:tareald') 


.get (tareaCtrl.read tarea) 
.put(tareaCtrl.update tarea) 
.delete(tareaCtrl.delete tarea); 
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3. Seguidamente crearemos el controlador al que hacíamos referencia en el 
código anterior. Crearemos el fichero tarea.js en la carpeta controller, y 
luego le añadiremos el siguiente código: 





server/controller/tarea.js 


ts.list all tareas = function(req, res) íres.send('«Lista 


tareas>');); 


ts.create tarea = function (reg, res) (res.send('Tarea 





eada');); 


ts.read tarea = function(req, res) (res.send('<Tarea>');); 





ts.update tarea =  function(req, res) (res.send( Tarea 
modificada") y; 











exports.delete_tarea function (req, res) {res.send(`] 
eliminada’ );}; 





De momento, las funciones de nuestro controlador únicamente devuelven 
un texto indicando la operativa realizada. En el siguiente capítulo completa- 
remos este código. 


4. Finalmente pondremos la carga de las rutas de la API en el código del 
servidor. Para ello, simplemente añadiremos el requerimiento de “server/ 
routes/tarea.js” en server.js: 


server.js 


//Cfg. de las rutas 
app.get('/api', (req, res) => ( 
res.send('La API funciona'); 


)); 
require('./server/routes/tarea') (app); 
app.get('*', (req, res) => { 


res.sendFile(path.join( _dirname, "'dist/index.html')); 


)); 





Es importante mantener el orden de líneas indicado, ya que el servidor re- 
suelve las rutas de arriba abajo. Si pusiéramos la referencia ".../tarea" por 
debajo de la ruta “app.get(*”,...”, ninguna petición HTTP llegaría a nuestra 
API. 


5. Una vez introducido todo el código, vamos a poner en marcha la aplicación 
para probar la API: 





Ej100 angular N071 ejMean»node server.js 
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6. Las peticiones HTTP de prueba las lanzaremos a través del software 
Postman. Postman funciona como una extensión de Google Chrome 
permitiendo construir y lanzar peticiones HTTP de forma muy sencilla. 
Con este software, podremos probar nuestra API sin tener que esperar al 
desarrollo de la aplicación Angular. Postman lo podemos descargar de 
forma gratuita desde www.getpostman.com, y su instalación es muy fácil e 
intuitiva. 





7. A través de Postman lanzaremos peticiones HTTP para cada uno de los 
endpoint definidos, configurando método (get,...) y URL según el caso. Vea 
distintos ejemplos: 


@ Postman 
File Edit View Collection History Help 


Bue ~ 
np ifNocalhosc3000 € + |... 
GET Y hap:;//iocalhosc3000lapi/tareas/ 


Authorization Header; Pre-request Script Tests 


This request does not use any authorizanon. Len 


Headers (6) Test Results S 2000K Tmc 53m* 


Preview HIML v  -5 


ENS aiste de teredbo 


@ Postman 


Fie Edit View Collection History Help 


+ w ~ 


mrpjhocwnosr3soQ0Y € + |... 


POST Y hap:ñocalhos:300Vapi/tareas/ Params 


Authorization Headers Body Pre-cequest Script Tesis 


This request does not use any aurhonzanon. Leone more nt 


Headers (6) Staus. 200 0K — Tme 31ms 


Pres 
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@ Postman 
Fle Edit View Collecbon History Help 


| No Environment 
http//localhost:3000/ & + s 


GET Y http://localhost:2000/api/tareaz/1 


Authorization Headers Pre-request Script 


This request does not use any authorization. Learn more abouta 


Headers (6) Test Results Status: 200 0K Time 3413 


Dreview HIML v > 


Eire carece 


[OQ 83 





@ Postman 
File Edt View Collechon History Help 


No Environment 
http7/localhost-3000/ € 


DELETE Y http://localhost:3000/apV/tareas/1 


Authorization Hcaders Body Pre-request Script 


This request does not use any authorization. Learn T 


Body Cookies Headers (6) Test Results Status: 2000K Time 35ms 


Pretty Raw Preview HIML v 5 


E Toreo eliminada 
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@ Postman 
File Edt View Colection History Help 


httpu/llocalhost3000/ € | + |... 
PUT Y httpz/localhost:3000/epi/teress/1 


Authorization Headers Body Pre-request Script 


This request does not use any authorization. Learn more about autho 


Body Cookies Headers (6) Test Results Status. 2000K Time: 36 ms 


Prety Raw Preview HM Y 53 


FEES Tarea moditicadal 
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vo MEAN: Creación 
de la API Restful 
(parte II) 


En este ejercicio terminaremos la RESTful API de 

nuestra aplicación. El primer paso será crear el mode- 
lo de datos “Tarea” con los siguientes campos: ti- 
tulo, creada (fecha creación) y estado (“Por hacer”, “En 
progreso”, “Hecha”). Este modelo de datos lo crearemos 
usando Mongoose, de esta manera, el modelo dispon- 
drá de forma automática de todos los métodos nece- 
sarios para trabajar con la base de datos MongoDB a 
la que nos habíamos conectado. Una vez hecho esto, 
completaremos el controlador “tarea”. 





Vamos a empezar con el ejercicio: 


1. Primero de todo abriremos el proyecto 071 ejMean con el editor Atom, y 
crearemos el modelo de datos "Tarea". Para ello, crearemos el fichero tarea.js 
en la carpeta models y le añadiremos el siguiente código: 


server/models/tarea.js 


var mongoose - require( mongoose'); 
var Schema = mongoose.Schema; 


var tareaSchema = new Schema (( 
titulo: ( 
type: String, 
Required: `El campo titulo es obligatorio.” 
), 
fecha: { 
type: Date, 
default: Date. 
), 
estado: { 
type: [í 
type: String, 
enum: ['Por hacer”, "En progreso’, "'Hecha'] 
)], 


default: ["'Por hacer'] 


p)? 





module.exports = mongoose.model ('Tarea”, tareaSchema); 
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2. Seguidamente modificaremos las funciones del controlador “tarea” 
sustituyendo el envío de texto informativo por la operativa real sobre la base 
de datos. 





server/controllers/tarea.js 


var mongoose = require( mongoose'); 
var Tarea = require("../models/tarea'); 


exports.list all tareas = function(req, res) { 
Tarea.find((), function(err, tarea) { 


if (err) res.send(err); 





res.json(tarea); 
)); 
); 


exports.create tarea = function(req, res) { 





var new tarea = new Tarea(req.body); 
new tarea.save(function(err, tarea) ( 
if (err) res.send(err); 
res.json(tarea); 
)); 
); 


exports.read tarea = function(req, res) { 
Tarea.findByld (req.params.tareald, function(err, tarea) ( 


if (err) res.send(err); 





res.json(tarea); 
DD; 
); 


exports.update tarea = function(req, res) { 
Tarea.findOneAndUpdate(( id: req.params.tareald), req.body, 
(new: true), function(err, tarea) ( 
if (err) res.send(err); 
res.json(tarea); 
)); 
); 





exports.delete tarea = function(req, res) { 


Tarea.remove(( id: req.params.tareald), function(err, tarea) { 


if (err) res.send(err); 





res.json((í message: 'Tarea eliminada correctamente” )); 
)); 
); 
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Como se puede ver en el código, el objeto creado a partir del modelo “Ta- 
rea” ya dispone de todos los métodos necesarios para trabajar con la base de 
datos MongoDB y se usan según convenga. 


3. Con esto ya habremos terminado nuestra API. Para probarla ejecutaremos 
nuestro servidor y haremos las pruebas con Postman. 








C:NEj100 angular1071 ejMean>node server.js 


fB Poma 
File Edt Wew Colecon History Help 


Ow: 


moare zo S + ... 

POST Y mupolllocalhosr IO Va pttaress/ 
Authorization leaders (1) Body e Pre-ruquas: Sc 
© tormdata ® rwenetormarencoded ® row 


Key 
B uo 
estado 


O Posimo 
Fie Edt Vea Collection History Help 


Bw - 


hupülocahesr3OQQ! ® + eee 


GET v http iocsihost 30 00/api/teres s] 


mms KON v 5 


*3alsbl66d1aA€62054225h70" , 
"teres 3 


"Por hacer* 


ha”: *1017-11-2$T712:15:50.1177" 
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@ posman 
File Edie View Collection History Help 


mupJ//lecamosc3ODU; © 


GET v httg;/locelhost-3000/aputaress/5a1ab103d3eBFG2054295b6e 


Raw — Preview — SON v 5 


y 
t 
3 
€ 


pe 
. 
^ 


5a150103dJ8010265429558e* , 
: *tarea 1*,| 


Ha 
mn~ 


weupe 


osman 
File Edir View Collection History Help 


+ TS 


mp//lecahosr3ODU; © + ... 

PUT v hupulocahost300Weputaress/5910b103d308162054295b6e 
Authorization Heeders (1) Body e Pre-request Script Tests 
O tormáara Y xwowtormuriencaded Y raw O Binary 


Kuy Value 


[^] estado 


Body Cookies Headers (6) Test Result 


Prerty Raw Preview PON v > 


ie 1 
à * íd": "5n1n01031328f6285429506e* , 
"título": “tarea 1*,] 





No Environment 


lia 


No Environment 
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@ Poaman 
Fie Edit Vew Colection History Help 


Oroa - 


ntpJ/lousnost3 € +t 


DELETE VY herpificcalhosr20Ó0/apiftareas/5a1 a5 11d JaBF820542955 5e 


Preity NON v == 


t- 
2 
mm 


*"meccago”: "Tarea aliminada corectasento” 








W MEAN: Desarrollo de 
componentes y rutas 
de la aplicación Angular 


Una vez terminado el backend de la aplicación, aho- 
ra trabajaremos en su frontend. Desarrollaremos la Importante 
aplicación Angular que habíamos creado en el ejerci- 
cio 071 de esta serie. La aplicación mostrará una vis- 
ta principal con las tareas de la base de datos, y una 
de secundaria para modificarlas y para crear nuevas 
tareas. 


Vamos a empezar con el ejercicio: 


1. Primero de todo abriremos el proyecto 071_ 
ejMean con el editor Atom. 


2. A continuación, pondremos en marcha la 
aplicación Angular. En estos primeros ejercicios 
no necesitaremos la API de servicios, por lo 
que de momento no pondremos en marcha la 
aplicación Express. 











Ej100 angularN071 ejMean»ng serve 


3. Seguidamente añadiremos los links de Bootstrap  (https://v4-alpha. 
getbootstrap.com) en index.html para poder hacer uso de sus hojas de 
estilo. Consulte el ejercicio 087 para obtener más información. 


4. Desde la línea de comandos crearemos los componentes tareaLista y 
editTarea. El primer componente será la vista principal de la aplicación y 
será donde visualizaremos la lista de tareas de la base de datos. Mientras que 
el segundo componente será la vista que utilizaremos para crear y modificar 
tareas. 


:MEj1ee angularX971 ejMean»ng generate component editTarea 

create src/app/edit-tarea/edit-tarea.component.html (29 bytes) 
create src/opp/edit-tarea/edit-tarea.component.spec.ts (650 bytes) 
create src/app/edit-tarea/edit-tarea.component.ts (284 bytes) 
create src/app/edit-tarea/edit-tarea.component.css (0 bytes) 
update src/app/app.module.ts (518 bytes) 


:XEj108 angularX071 ejMean» 
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-:1E3100 angularX971 ejMean»ng generate component tarealista 
create src/app/tarea-lista/tarea-lista.component.html (3e bytes) 
create src/app/tarea-lista/tarea-lista.component.spec.ts (657 bytes) 
create src/app/tarea-lista/tarea-lista.component.ts (288 bytes) 
create src/app/tarea-lista/tarea-lista.component.css (0 bytes) 
update src/app/app.module.ts (414 bytes) 


:1e3108_angular1071_ejMean> 


Ej100 angularN071 ejMean»ng generate component tareaLista 








Ej100 angular V071 ejMean»ng generate component editTarea 


5. Una vez creados los componentes, pasaremos a realizar la configuración del 
servicio Router para poder pasar de una vista a otra a través del URL. El 
primer paso será realizar la importación del servicio en "app.module.ts": 


src/app/app.module.ts 


import ( RouterModule, Routes ) from "'"Gangular/router'; 





6. Acontinuación, realizaremos la configuración de rutas en el mismo fichero. 
/tareas será nuestra ruta principal, y nos llevará al componente tareaLista. 
Para la modificación y creación de tareas tendremos las rutas "tareas/:id/ 
edit" (“:id” será el identificador de tarea) y "tareas/new", respectivamente, 
que nos llevarán al componente editTarea. 


src/app/app.module.ts 


const appRoutes: Routes- [ 


( path:'tareas', component:TareaListaComponent], 
p 





( path:'tareas/:id/edit', component:EditTareaComponent ), 
p 





{ path:'tareas/new', component:EditTareaComponent }, 


( path:'**', redirectTo:'/tareas', pathMatch:'full') ]; 


aNgModule(í( 
declarations: [.], 


imports: [..,RouterModule.forRoot (appRoutes)], 





7. Finalmente pondremos la etiqueta “router-outlet” en el template del 
componente principal para indicar al servicio Router donde debe realizar las 
visualizaciones de los componentes. 
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src/app/app.component.html 


«div class-"container"» 


«h3»Gestor de Tareas</h3> 


«router-outlet»«/router-outlet» 


«/div» 





8. Desde el navegador puede realizar las pruebas para validar el código. 
Para el URL "localhost:4200/", será redireccionado a "localhost:4200/ 
tareas", para el URL "localhost:4200/tareas" visualizara el componente 
tareaLista, para "localhost:4200/tareas/:id/edit" y “localhost:4200/tareas/ 
new" visualizará el componente editTarea, y para cualquier otra ruta será 
redireccionado a "localhost:4200/tareas". 


// QV Germ xUA / O Ever N 
€»q3 [O cores ] ] H €» Q3 | O tocathost:42 tarea 
Gestor de Tareas Gestor de Tareas 
works! works! 


/ QV Eee Ñ 
>C | © tocalnast:42 jtareasjnew 
Gestor de Tareas 

works! 





9. Antes de empezar a desarrollar los componentes, crearemos varios elementos 
que estos necesitarán: modelo de datos, servicio de acceso a la API del 
backend, etc. Para empezar, primero crearemos la carpeta shared dentro 
de “src/app”. En ella pondremos todos estos elementos compartidos por 
los componentes de la aplicación. La carpeta la crearemos pulsando botón 
derecho del ratón encima de la carpeta src/app, seleccionando “New 
Folder”, y definiendo la nueva carpeta como shared. 
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10. El primer elemento compartido que crearemos será el modelo de datos 
“tarea”, que dará forma a la entidad gestionada por la aplicación, o sea, 
una tarea. Pulsaremos el botón derecho del ratón encima de la carpeta src/ 
app/shared, seleccionaremos "New File" y definiremos el nuevo fichero 
como tarea.model.ts. El modelo de datos "tarea" lo definiremos con los 
mismos campos y tipos que habíamos utilizado en el backend: 





src/app/shared/tarea.model.ts 





type TareaEstados - "Por hacer" | "En progreso" | "Hecha"; 





export var TareaEstadosSelect = [í(value: "Por hacer”), (value: 


“En progreso”), (value: "Hecha"]]; 


export class TareaModel { 


constructor ( 


publie xdi string, 


publie titulo: string, 


public fecha: Date, 





public estado: TareaEstados 
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545. MEAN: Desarrollo de la 
operativa “Lectura 
de tareas” 


Continuado el desarrollo del frontend de nuestro “Gestor de Tareas”, en este ejercicio 
crearemos el servicio de acceso a la API con una primera función para obtener las tareas 
de la base de datos, y desarrollaremos el componente tareaLista para que las muestre. 


Vamos a empezar con el ejercicio: 
1. Primero de todo abriremos el proyecto 071_ejMean con el editor Atom. 


2. Desde la línea de comandos crearemos el servicio “tarea” que nos dará acceso 
a la API del backend. Este servicio lo crearemos dentro de la carpeta shared. 





Ej100 angularN071 ejMean»ng generate service shared/tarea 


:XEj1ee angularX671 ejMean»ng generate service shared/tarea 
create src/app/shared/tarea.service.spec.ts (368 bytes) 
create src/app/shared/tarea.service.ts (111 bytes) 


:1Ej108_angular1071_ejMean>,, 





3. Para poder usar el servicio “tarea” (TareaService), deberemos registrar 
su proveedor. En este caso lo haremos a nivel de módulo para que todos 
sus componentes puedan usarlo. 


Por otra parte, “TareaService” utilizará el servicio de Angular HttpClient 
para realizar las peticiones HTTP a la API del backend. Por tanto, aprovecha- 
remos la modificación en “app.module.ts” para añadir también la importa- 
ción del módulo HttpClientModule. 





src/app/app.module.ts 


import (HttpClientModule) from “Rangular/common/http'; 


import ( TareaService ) from "./shared/tarea.service'; 


fNgModule (( 


declarations: [.], imports: [.., HttpClientModule], 


providers: [TareaService],..)) 


export class AppModule { ) 
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4. Seguidamente crearemos la primera función de TareaService: “getAllTareas()”. 
Esta función se utilizará para obtener todas las tareas de la base de datos. 





src/app/shared/tarea.service.ts 


fInjectable () 


export class TareaService ( 
constructor (private http: HttpClient) 
getAllTareas () { 


return this.http.get<TareaModel[]>('http://localhost:3000/ 


api/tareas'); 


) 





Fíjese que "getAllTareas()" devuelve un obser- 
vable obtenido a partir de la ejecución de “Ht- 
tpClient.get()" sobre el endpoint “get — '/api/ 
tareas’ — “Devuelve todas las tareas'" de nuestra 
API. La petición HTTP hacia la API se hará efec- 
tiva cuando se realice la subscripción sobre 
ese observable. Para más información consulte 
el capítulo 054. 


Importante 


export class TareaListaComponent implements OnInit { 





5. Finalmente inyectaremos el servicio "tarea" al 
componente “tareaLista”, y modificaremos su 
código para que obtenga las tareas a través del 
servicio y las muestre por su template. 


src/app/tarea-lista/tarea-lista.component.ts 


Component ((...)) 


tareas: Observable«TareaModel[]»^; 





constructor(private tareaService: TareaService) ( ) 





ngOnInit() ( 


this.tareas = this.tareaService.getAllTareas(); 





src/app/tarea-lista/tarea-lista.component.html 
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<div class-"container"» 
«div class-"row"» 


«div class-"cocol-sm-12"» 





«form class-"form-inline"» 
<fieldset class-"form-group col-sm-11"»«/fieldset» 
<fieldset class-"form-group col-sm-1"»«a class-"btn 
btn-primary”>+</a></fieldset> 
</form> 
<br> 


<table class="table table-striped”> 





<thead> 
«tr class-"row"» 


«th class-"col-sm-6"»Título«/th» 


mdr 
</thead> 
<tbody> 
«tr *ngror="let tarea of tareas | async" 
class="row"”> 


«td class-"col-sm-6"»«i»([tarea.titulo))«/ 


lse« ta» 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
</div> 





Fíjese que la subscripción al observable obtenido en “getAllTareas()” se reali- 


za con la pipe async. 


6. Para probar el código necesitaremos que la API esté en marcha. Por tanto, 
primero compilaremos la aplicación Angular mediante “ng build”, y 
seguidamente ejecutaremos la aplicación Express con "node server.js”. 


7. Seguidamente, sitúese en http://localhost:3000 para que la aplicación 
Express le envíe la aplicación Angular al navegador. Enseguida debería ver 


las tareas que habíamos creado con Postman anteriormente. 
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:1Ej180 angular1871_ejmean>ng build 

ate: 2017-11-30119:20:41.3027 

lash: 04cc2340b043118f5560 

Time: 18128ms 

chunk (inline) inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered] 
chunk (main) main.bundle.js, main.bundle.js.map (main) 17.3 kB (vendor) [initial] [rendered] 


chunk (polyfills) polyfills.bundle.js, polyfills.bundle,js.map (polyfills) 217 kB {inline} [ 
initial] [rendered] 

chunk (styles) styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB (inline) [initial] [r 
endered] 

chunk (vendor) vendor.bundle.js, vendor.bundle.js.map (vendor) 2.4 MB [initial] [rendered] 


:XEj100 angular1071_ ejMean»node server.js 
API running on localhost:3eee 
ongoose default connection open to mongodb://localhost/db mean 


O Econ x 
- Q |O tocalhost3000/tareas 


Gestor de Tareas 


Título Fecha Estado 


Tarea 1 28-11-2017 Por hacer 


30-11-2017 En progreso 





320 El gran libro de Angular 


MEAN: Desarrollo de las 
operativas “creación, 
modificación y eliminación 
de tareas” (parte l) 


Continuando el desarrollo del frontend de nuestro 
“Gestor de Tareas”, en este ejercicio trabajaremos con Importante 
la implementación de las funcionalidades para crear, 
modificar y borrar tareas. Las acabaremos en el siguien- 
te y último ejercicio de la serie. 





1. Primero abriremos el proyecto 071 ejMean 
con el editor Atom. 


2. Abriremos el template del componente tareaLista 
y configuraremos los botones de crear y modificar 
tareas. Esta configuración consistirá en añadir los 
links a las rutas "tareas/new" y “tareas/:id/edit” 
(“:id”: identificador de tarea), respectivamente. Las 
dos rutas nos llevaran al componente editTarea. 
Vea un ejemplo al pulsar la edición de una tarea. 





src/app/tarea-lista/tarea-lista.component.html 


<fieldset class-"form-group col-sm-1"»«a class-"btn btn-primary" 


[routerLink]="['/tareas/new' ] “>+</a></fieldset> 


«td class-"col-sm-1"»«a class-"btn btn-info" [routerLink]-"["/ 


tareas',tarea. id,'edit']"»Edit«/a»«/td».. 




















€ > Q | Q.ocalhost:3000/ EE EE DSi Ki yiri E e cro 





Gestor de Tareas 


edit-tarea works! 





El gran libro de Angular 321 


3. Antes de implementar el componente editTarea, vamos a añadir en el 
servicio “tarea” las distintas funciones para leer, crear y modificar una 
tarea de la base de datos. Cada una de ellas lanzará la petición HTTP que 
corresponda en cada caso. 





src/app/shared/tarea.service.ts 


getTarea (id: string) 
return this.http.get<TareaModel>('http://localhost:3000/ 
api/tareas/' + id); 
) 
addTarea (tarea: TareaModel)[í 


return this.http.post<TareaModel>('http://localhost:3000/ 


api/tareas', ( titulo: tarea.titulo, fecha: tarea.fecha, 


estado: tarea.estado]); 
) 


updateTarea (tarea: TareaModel) 





return this.http.put<TareaModel>('http://localhost:3000/ 
api/tareas/' + tarea. id, { titulo: tarea.titulo, fecha: tarea. 


fecha, estado: tarea.estado]); 


) 





4. También necesitaremos importar FormsModule en nuestra aplicación, 
ya que en el template editTarea implementaremos un formulario para la 
entrada de datos de la tarea que se vaya a crear o modificar. 


src/app/app.module.ts 


import ( FormsModule ) from '“Rangular/forms'; 


fNgModule ({ 


declarations: [..], imports: [., FormsModule], ..)) 


export class AppModule { ) 





5. Ahora ya podemos empezar el desarrollo del componente editTarea. 
Primero crearemos una variable tarea que contendrá la tarea que estemos 
modificando o creando. En la función ngOnlnit() inicializaremos su valor. Si 
el URL contiene el parámetro id. de tarea, la inicializaremos con la tarea que 
nos devuelva el backend para esa id.; en caso contrario, la inicializaremos 
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con una nueva. Estas llamadas devuelven observables y se gestionan 


mediante operadores de la librería RxJs. 





src/app/edit-tarea/edit-tarea.component.ts 


Component ((...)) 
export class EditTareaComponent implements OnInit { 


tarea: TareaModel; 


tareaEstadosSelect = []; 


private router: 





constructor(private route: ActivatedRoute, 


private tareaService: TareaService) { ] 


Router, 
ngOnInit() ( 
this.tareaEstadosSelect 


— TareaEstadosSelect; 


this.route.paramMap 


.map (params => params.get('id')) 


.switchMap (id => ( 


if (id) return this.tareaService.getTarea (id); 
.of(new TareaModel (null,"",new 


else return Observabl 





"Por hacer")); 


}) 
.subscribe (tarea => {this.tarea = tarea; console. 


log (tarea); }, error => {console.log (error)}); 


} 





eon x 
/ 9 Em NER 
G) localhost:3000/tareas/5a205c52c94367267ccbbcad/edit 
Sources — Network » 


é >C 
Gestor de Tareas R A] | temes Comte px 
O | top Y | Fater  | Defauitlewels Y f 
core.es5. [s:2925 


edit-tarea works! 
Angular is running in the development 
mode. Call enableProdMode() to enable tne production mode. 











(Lid: "5a285c52c84367267ccbhcod", titulo: "Tarea 2”, — v: 
va, estado: Array(1), fecha: "2917-11-30719:30:25.5222"] 
a 

> estado: ["Hecha"] 

feche: *2017-11-30T19:30:25.5227" 

titulo: "Tarea 2° 

w:o 

.la: "5a205c52c94367267ccbbcad" 
b roto ; Object 
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6. Finalmente, crearemos la función onSubmit() para guardar los datos. 
Si la tarea tiene identificador, se llamará a la función de modificación del 
servicio y, en caso contrario, a la de creación. Posteriormente, vincularemos 
onSubmit() al formulario del template del componente. 





src/app/edit-tarea/edit-tarea.component.ts 


onSubmit () f 
if (this.tarea. id) 
this.tareaService.updateTarea (this.tarea) 
.subscribe (data => {console.log (data); this.router. 
navigate(['/tareas']);),error=>console.log(error)); 
else 
this.tareaService.addTarea (this.tarea) 


«subscribe (data => {console.log (data); this.router. 


navigate(['/tareas']);),error=>console.log(error)); 


) 
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MEAN: Desarrollo de las 
operativas “creación, 
modificación y eliminación 
de tareas” (parte ll) 

En este ejercicio acabaremos el “Gestor de Tareas” 

que hemos estado desarrollando durante esta serie de 


ejercicios. 





1. Primero abriremos el proyecto 071 ejMean 
con el editor Atom. 


2. Seguidamente abriremos el template del 
componente editTarea, y le añadiremos 
el código para que visualice un formulario 
con los distintos campos de la tarea que 
tenga cargada (mire el anterior ejercicio para 
obtener más información). 





src/app/edit-tarea/edit-tarea.component.html 
«div class-"row"» 
<div Qlass-"ecol-sm-12"5 
«form (ngSubmit)-"onSubmit()" ftareaForm="ngForm”> 
«fieldset class-"form-group"» 
«div eGlass-"col-sm-12"- 


«label class-"control-label" for="titulo*>Titulo</ 


<input type-"text" class-"form-control" required 
[(ngModel)]-"tarea.titulo" name-"titulo"» 
</div> 
</fieldset> 
<fieldset class-"form-group"» 
<div class-"col-sm-3"» 
<label class-"control-label" for-"fecha"»Fecha«/label» 
<input type-"date" class-"form-control" required 


[ngModel]="tarea.fecha | date: '*yyyy-MM-dd'” 





(ngModelChange)-"tarea.fecha-$event" name-"fecha"/» 





e BW 
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</fieldset> 
<fieldset class-"form-group"» 


«div class="ec01-sm-3*%> 





«label class-"control-label" for="estado">Estado</ 


label» 
«select class-"form-control" required 


[ (ngModel) ]="tarea.estado” name-"estado"» 





<option *ngFor-"let estado of tareaEstadosSelect” 


[value]="estado.value”>([(estado.value))</option> 


</select> 
</div> 
</fieldset> 


<fieldset class-"form-group"» 








«div class-"col-sm-offset-2 col-sm-10%> 
«button type-"submit" class="btn btn-primary” 
[disabled]="!tareaForm.form.valid”>Submit</button> 
</div> 
</fieldset> 
</form> 
</div> 


e da 





También hemos configurado el botón para guardar los datos. Este botón so- 
lamente estará activo si los datos son válidos, y al pulsarlo se llamará la fun- 
ción onSubmit() del componente. 


3. En el formulario hemos indicado que todos los campos son obligatorios 
(“required”). Para indicar al usuario este requerimiento, vamos tocar la hoja 
de estilo del componente para que los campos obligatorios vacíos queden en 
rojo y si no en verde. 


src/app/edit-tarea/edit-tarea.component.css 


.ng-valid[required], .ng-valid.required { border-left: 5px 


solid 442A948; /* green */) 


.ng-invalid:not(form) { border-left: 5px solid 4$a94442; /* red 


*/) 





326 El gran libro de Angular 


4. Finalmente implementaremos la funcionalidad para borrar tareas. Primero 
añadiremos la función en el servicio tarea: 





src/app/shared/tarea.service.ts 


deleteTarea (id: string)( 


return this.http.delete<string>('“http://localhost:3000/api/ 


tareas/' + id); 





} 


5. Y por último codificaremos el botón borrar del template de tareaLista 
para que llame a la función deleteTarea(id) que implementaremos en el 
componente. 


src/app/tarea-lista/tarea-lista.component.ts 





deleteTarea(id:string) { 





this.tareaService.deleteTarea (id) 


. subscribe (data=>console.log (data) ¡error=>console. 


log(error)); 


this.tareas = this.tareaService.getAllTareas(); 


src/app/tarea-lista/tarea-lista.component.html 


«td class-"col-sm-1"»«a class="btn btn-danger” 








(click) ="deleteTarea (tarea. id)"»-«/a»«/td» 


6. Para probar el código recuerde ejecutar la aplicación Express con su 
API. Por tanto, primero compilaremos la aplicación Angular mediante 
"ng build", y seguidamente ejecutaremos la aplicación Express con 
"node server.js". Luego sitüese en http://localhost:3000 para probar la 
aplicación. 


7. Pruebe las distintas funcionalidades implementadas. Por ejemplo, puede 


crear una nueva tarea, visualizarla en el listado, y editarla para cambiar su 
estado. 
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e 
TA EjMesn FO Emeen NOS 


>C [o focalhast3000/tsreas/new € > Q |O tocamost3000/rareas/new 


Gestor de Tareas Gestor de Tareas 


























Crear Tarea Crear Tarea 
Título Título 








| Teas | ruca 








Fecha Fecha 





85/11/2017 | 15/11/2017 


mowenbmde207 « E | Estado 
i sá do 


vi 








Hecha 








| 
En progreso 
| 


Q Suen 
€ 9 Q [0 iccstestson tareas 


Gestor de Tareas 











Fecha 


28-11-2017 


30-11-2017 


30-11-2017 


35-17-2017 





sie 


€ > Q |© localhost3000/tareas/532068285... Wl] $r 
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Modificar Tarea 
Titulo 


| Tarea 5 





Fecha 





| 15/11/2017 





Estado 





Por hacer al 
| Por hacer 
| Hecha 
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U CSS: Introducción 
(parte 1) 


Queda fuera del alcance de este libro la realización de 
un curso de CSS, pero hemos considerado oportuno 
incluir un par de ejercicios para familiarizarnos con 
este lenguaje prácticamente imprescindible en la pro- 
gramación web de hoy en día. 


Importante 


CSS es un lenguaje de estilo que define la presentación 
de los documentos HTML y las siglas que le dan nom- 
bre son el acrónimo de CascadingStyle Sheets (ho- 
jas de estilo en cascada). 





Entre los diversos beneficios obtenidos por el uso de CSS, 
se halla el de poder concentrar todas las definiciones pre- 
vistas para los distintos elementos que componen nuestras páginas en un solo archivo 
de estilos de forma que podemos variar el aspecto de cientos de documentos muy rápi- 
damente solo modificando dicho archivo de estilos. 


La sintaxis básica es: selector [ propiedad: valor j, donde: 


e selector: elemento HTML al que se aplica la propiedad (p. ej., <p>), 
e propiedad: propiedad que queremos modificar (p. ej., color”), 
e valor: valor de la propiedad (p. ej., ^red"). 


Las formas de aplicar CSS a un documento son las siguientes: 


e Directamente a una etiqueta. 
Usando la etiqueta style y definirla en el apartado head de nuestra página. 
Usando un fichero de estilos con la extensión css y referenciándolo en 
nuestra página. Este es el método más recomendado, ya que es una de las 
características que más potencia da al lenguaje. 


En el siguiente ejercicio vamos a probar algunas de las propiedades relacionadas con 
colores, fuentes y textos. 
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Permite describir el color de primer plano de un elemento. 


background-color Permite describir el color de fondo de los elementos. 


Permite insertar una imagen de fondo 


background-repeat Permite indicar como se ha de repetir la imagen (horizontal, vertical, ambas o 











Tont-variant 
font weigh 


Permite indicar el tamaño de las fuentes (en píxeles y porce 


es 
Permite incluir todas las propiedades relativas a fuentes en una ünica sentencia. 


Permite alinear ei texto horizontalmente. 
Permite añadir efectos al texto (underline. overline, line-thro: 


Permite especificar espaciado entre cada uno de los caracteres i texto. 





1. En primer lugar, nos situaremos en la carpeta C:NEj100 angular y 
crearemos una carpeta denominada 079 CSS Introl para desarrollar este 
ejercicio. 


2. Dentro de la misma, crearemos dos archivos: MiPagina.html y estilos.css. 
3. MiPagina.html contendrá inicialmente lo siguiente: 


«html 
«head» 
«title»Mi pagina</title> 


<link rel="stylesheet” type-"text/css" href="estilos. 


past > 
</head> 


<body> 


<hl>Pagina de pruebas</h1> 


</body> 


</html> 
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El fichero de estilos contendrá una definición de color para <h1> y otra de 
color de fondo para el <body> de la siguiente manera: 








color: $21 


) 


body { 


background-color: f58FAAC; 





Si visualizamos la página en nuestro navegador 7 

veremos cómo, efectivamente, nuestro <h1> ARA 
< > C N |O fiene. w| F a 

se muestra en color azul sobre un fondo verde . A o 


4. Ahora, en la misma carpeta insertaremos una 
imagen cualquiera (p. ej., img1.jpg) la cual 
usaremos como imagen de fondo para <body> 
de la siguiente manera: 





body { 
background-color: #58FAAC; 
background-image: url("imgl.jpg"); 


background-repeat: no-repeat; 


x WA 
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/ [3 Mi pagina x eun / [3 Mi pagina x NI » 
4 à 4 


E> CNA | © filey//C:/E)100_ang... € > @ (y |O fle/,1C/Ej100 29... 





Haga diversas pruebas cambiando no-repeat por repeat-x, repeat-y 
repeat. 


5. Añadimos a <body> las siguientes instrucciones para colocar la imagen 
en la esquina inferior derecha y hacer que siempre se muestre en esa 
posición, aunque en la ventana se produzca un scroll: 


background-position: right bottom; 


background-attachment: fixed; 





A continuación, añadiremos algunas propiedades relacionadas con las fuen- 
tes, incluyendo los siguientes estilos para «h2» y «h3» en estilos.css: 


color: red; 


font-variaut: small-caps; 





font-family: arial, verdana, sans-serif; 


font-weight: bold; 


color: yellow; 


font-style: italic; 


font-size: 120$; 
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En la página HTML incluya las etiquetas <h2> y <h3> detrás de </h1>: 





<body> 
<hl>Pagina de pruebas</h1> 
<h2>Segundo titulo</h2> 


<h3>Tercer titulo</h3> 


</body> 


[ Mi pagina x 


€» 00 [O receno- +] 4 e M e 0 


» | |. Otros marcadores 


Tercer titulo 





Guarde los archivos y refresque la página en el navegador. 


6. Por ültimo, vamos a probar algunas propiedades relacionadas con el texto. 
Para ello, incluiremos los siguientes estilos al final del archivo estilos.css: 


text-decoration: underline; 


letter-spacing: 6px; 


text-transform: uppercase; 





En la página HTML incluimos un párrafo detrás de «/h3» con los siguiente: 





<p>Es un parrafo</p> 


Gracias al estilo, observaremos que el texto del párrafo aparece subrayado, 
con una separación de 6 píxeles entre cada carácter y todo en mayúsculas. 
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€ > € Q[O tec m. w] 4 e B e & 


» 


Tercer titulo 
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vu. CSS: Introducción 
(parte 2) 


En este segundo ejercicio dedicado a CSS, vamos a ver 
algunos ejemplos más, relacionados con la forma de 

mostrar enlaces, identificar elementos, crear cajas, lis- 
tas, usar bordes, posicionamiento de elementos, etc. 


A la hora de definir estilos en un archivo .css, pode- 
mos hacerlo referenciando los selectores convenciona- 
les o bien referirnos a clases (class), pseudo-clases (o 
estado de elementos), identificadores (id) o una com- 
binación de todos ellos. 


Por ejemplo, para asignar un color de fuente de color 
rojo, podríamos hacerlo a: 


Elemento Ejemplo 
. span (color: blue;] 
selector <h1>, «p», «div»,«span», etc. 


.miClase ( color: blue;) 





class Un nombre de clase añadi- 
da a un selector mediante 
class="miClase” 


"EM . . A a:visited (color: red;] 

a:visited Un link que ya ha sido visitado possesses] 
. . . . #miId (color: red;) 

*mild Un identificador determinado 


div: hover.impares (color: 


selector:estado. | Un selector con un estado y una 


d; 
clase clase Be 


div:hoveritdos (color: red;) 
selector:estado. | Un selector con un estado y un 


id identificador 

span, hl (color: red;) 
Selector1, selec- | Un selector u otro 
tor2, ... 








El gran libro de Angular 335 


1. En primer lugar, nos situaremos en la carpeta C:1Ej100_angular y 
crearemos la carpeta denominada 080 CSS Intro2 para desarrollar este 
ejercicio. Dentro de la misma, crearemos dos archivos: MiPagina.html y 
estilos.css. 


2. MiPagina.html contendrá un par de enlaces y un párrafo que incluye 
una etiqueta span. span básicamente es un contenedor genérico que nos 
permitirá asignar estilos a partes de una página. 


<html> 
<head> 
<title>Mi pagina</title> 
«link rel="stylesheet" type="text/css" href="estilos.css” /» 
</head> 
<body> 


<h1>Titulo 1</h1> 
<a href="http://www. google. com' >Google</a><br> 
<a href-'https: //www. youtube. com/ ' >Youtube</a><br> 


<p>Mi texto <span>especial</span> de pruebas</p> 
«/body» 
«/html» 





3. estilos.css contendrá una definición de color para <h1> y otra de color de 
fondo para el «body». 


body { background-color: +CEF6F5; ) 
h1 (font-family: arial, verdana, sans-serif;) 
h1 (color: blue;) 





4. Podemos observar que <h1> contiene diversas definiciones y no todas 
tienen por qué estar agrupadas (hay 2 líneas referidas a <h1>). Veremos que 
esto facilita el hecho de que una misma definición de estilo pueda aplicarse 
a diferentes tags o elementos. 


5. Guardamos los archivos y visualizamos la página en el navegador para ver 
cómo queda. 
E Mi pagina x Ñ ^ 
€ > Q | O fie//c/t100 angular/080.CSS |... Yr | 











Titulo 1 


Youtube 


Mi texto especial de pruebas 





6. A continuación, vamos a utilizar el concepto de pseudo-clase que, en 
definitiva, se trata de una palabra clave que añadimos a los selectores para 
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a:link ( color: +04B404; ) 
a:visited ( color: red; ) 


poder especificar el estado de un elemento. Por 
ejemplo, podríamos distinguir entre los enlaces 
no visitados (link), los visitados (visited) o 
detectar cuando pasamos el puntero del ratón 
sobre un enlace (hover). En nuestro caso, 
afiadiremos al final de nuestro fichero estilos. J 
css una definición para cada estado. 


a:hover ( color: yellow; 
font-weight: bold; 
font-size: 30px; 





7. Si guardamos la página y la visualizamos en el navegador, vemos que los 
links no visitados (link) aparecen en verde, si pasamos el puntero del 
ratón sobre el link de Google (hover) el texto cambia de tamaño y de color 
y si pulsamos sobre el link de Google y regresamos de nuevo a la página, 
ahora veremos que el link visitado (visited) aparece en rojo. 

E, / D) Mi pagina x wi A 


y D) Mi pagina Ñ 
^ Q | O file7//C/Ej100 angular/080 CSS I... * | a € > C |O filey//C/Ej100_angular/080_CSS 1... yr 





Titulo 1 Titulo 1 


Google 
Youtube 


Mi texto especial de pruebas 


Youtube d» 

Mi texto especial de pruebas 
w.google.com 

/ [y Mi pagina XN 


i Li 


3 C |O fie///C:/£)100 angular/080 CSS 1... Ye | 





Titulo 1 


Google 


Xoutube 
Mi texto especial de prucbas 





8. Ahora, afiadiremos una definición para mostrar en color azul el texto 
contenido la apertura y cierre de span. Para ello, podemos hacer una 
definición exclusiva para span o bien aprovechar la que ya hicimos para 
h1 simplemente añadiendo la palabra span al inicio de la definición y una 
coma antes de h1. 


h1 (font-family: arial, verdana, sans-serif;) 


span, h1 (color: blue;) 


a:link ( color: #04B404; ) 





9. Podemos comprobar cómo queda en la página. 
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Pa AN, 
/ [M Mi pagina x VA 


> C |O file///C/Ej100 angula/OB0 CSS 1... 3r E: 








Titulo 1 


Google 


Youtube 
wm CDs 





10. A continuación, vamos a añadir otro párrafo («p») y 3 <div> sobre los que 
afiadiremos algunos estilos. 


<p>Mi texto <span>especial</span> de pruebas</p> 

<p>Mi segundo parrafo <span>tambien especial</span> de pruebas«/p»i 
'<div>Div 1</div> i 
I«divoDiv 2</div> | 
[<div>Div 3«/div» : 


«/body» 





11. En primer lugar, haremos una definición genérica para los div incluyendo 
en estilos.css algunos estilos. 


divi 
margin: 5px; 
padding: 20px; 
border-width: 4; 
border-style: double; 
border-color: #0A5B05; 
font-size: 15px; 





12. Guarde los archivos y compruebe cómo queda en el navegador. Recuerde 
que margin define el espacio alrededor del elemento y padding define el 
espacio entre el borde y el elemento. Compruebe también el ancho, estilo y 
color del borde además del tamaño de la fuente. 


— ` a x 
/ D Mi cogira. * WA 
* 3 C |O ec angui- & NE E 
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13. En css haremos una definición para una clase denominada especial 
(.especial) y otra definición para el identificador (dos). 


.especial( 
background-color: $63E31E; 
border-color: black; 
font-weight: bold; 


} 
#dos{ 


color: green; 
background-color: #F2F5A9; 
position:absolute; 

bottom: 50px; 

right: 58px; 





14. Añadimos las clases y el identificador a nuestro párrafo nuevo y a los div 
impares dentro del archivo HTML. 


<p>Mi texto <span>especial</span> de pruebas</p> 


«p jclass="especial">M] segundo parrafo <span>tambien especial</span> de pruebas</p> 
<div class-"especial")Div 1</div> 

«div id-"dos"»Div 2«/üiv» 

«div classs"especial"bDiv 3</div> 


———————— Pm 


</body> 





15. Veamos en el navegador cómo queda. Observe que, al redimensionar la 
página, el div con identificador dos se reposiciona dentro de la página. 
/ D Mipogiro x un 


€ > Q|(Q9fic//C/&100 angular/080 CSS yr | MN E 
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16. Por último, añadiremos un par de definiciones para ver cómo se pueden 
combinar elementos, estados e identificadores. 


17. En un caso, estamos definiendo que, al pasar el ratón por encima de un 
<div> que posea la clase especial o al pasar el ratón sobre el título <h1>, 
cambie el aspecto del bloque. Por otra, el aspecto cambiará al pasar sobre el 
bloque cuyo identificador es dos. 
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div:hover.especial, hl:hover ( 
color: blue; 
background-color: $&2E9AFE; 
border-color: black; 
font-weight: bold; 

) 

div:hoveritdos( 
color: blue; 
background-color: +F29D1B; 
font-weight: bold; 














» 








Titulo 1 


Google 
Youtube 


Mi texto especial de pruebas 





340 El gran libro de Angular 


HTML 





Es el lenguaje utilizado en Internet para fabricar pági- 
nas web. Tal y como sus propias siglas indican, se trata 
de un lenguaje “de marcado” (HyperText Markup 
Language) basado en una serie de etiquetas inter- 
pretadas por los navegadores para dar formato a las 
páginas. Además de texto, permite definir imágenes, 
vídeos, sonidos, juegos, etc. Para su edición, puede uti- 
lizarse cualquier editor de texto (p. ej., Bloc de notas) 
y los archivos que se generen han de tener general- 
mente la extensión html (aunque pueden usar otras 
como htm, etc.). Las etiquetas utilizadas están rodea- 
das por los símbolos < , > y representan un elemento. 
Los elementos a su vez poseen dos propiedades funda- 
mentales: sus atributos y su contenido. 


En general, todos los elementos tienen una etiqueta (o 
tag) de apertura y otra de cierre que es la misma, pero 
anteponiendo al nombre del elemento, una barra ('/). 


Importante 





A continuación, mostramos uno de los elementos más comunes como es el párrafo: 





«p»Ejemplo de párrafo</p> 


Un ejemplo de estructura básica de un documento HTML donde pudiéramos in- 
cluir el párrafo de ejemplo anterior está compuesto por el siguiente código: 


<!DOCTYPE html> 





«html» 
«head» 
<title>Título de la página</title> 
</head> 


<body> 





<p>Ejemplo de párrafo</p> 


</body> 


</html> 
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Podemos observar que el documento está encerrado 
entre los tags «html» y en su interior contiene esen- 
cialmente un <head> y un <body>. <head> define 
la cabecera del documento y puede contener otros ele- 
mentos relacionados con el estilo de la página o meta- 
datos que aportan información sobre el autor u otros. E 
<body> es la parte donde se define realmente el con- 

tenido y se muestra en los navegadores. Dentro de este 
apartado es donde se incluyen las etiquetas con las que 
fabricaremos nuestras páginas web. En nuestro navega- 
dor solo veremos el párrafo y el título de la página. 








No podemos relacionar todas las etiquetas que pueden utilizarse, ya que nos exten- 
deríamos mucho más allá de lo que pretendemos en este ejercicio, pero de forma 
muy esquemática relacionamos a continuación las etiquetas más comunes: 


A 


.. 


Incluye línea de separación. 


Texto preformateado que mantiene el texto tal y 
como está en el archivo. 


0 


41: 


<i> Muestra texto en itálica. 
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Muestra texto en negrita (bold). 


<b> 






<form> Define un formulario (vea capítulo dedicado a forms 
dentro de este libro). 


<script> Permite insertar programas. 


En el siguiente ejercicio, vamos a elaborar una página HTML con algunos ejemplos 
de las etiquetas más importantes usadas en este lenguaje. 


1. En primer lugar, nos ubicaremos en Ej100_angular y crearemos la carpeta 
081_HTML tecleando lo siguiente: 


C:1Ej100_angular>mkdir 081 HTML 


Dentro de la carpeta, crearemos un archivo llamado MiPagina.html con 
el siguiente contenido: 


[) MiPaginahtm! x \ WD 


€ > © Û |Ofie//C/t100.. € | F : 
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<!DOCTYPE 





«html» 

«head» 
«title»«/title» 

«/head» 

«body» 


«table border-1 style-"background-color:4A9F5F2"» 


<th>Etiqueta</th> 





<th>Ejemplo</th> 
LE? 
«td»&lt;p&gt;«/td» 
«td»«p»Ejemplo de párrafo</p></td> 
S EE 
«/table» 


</body> 





</html> 


En la página, hemos creado una tabla para ir depositando los ejemplos que 
vayamos insertando (&lt;) y (&gt;) son los caracteres de '«' y “>”, respectiva- 
mente, que han de indicarse así para evitar que HTML los interprete como 
caracteres especiales del lenguaje. Guarde la página y ábrala en el navegador. 


2. A partir de aquí, pruebe de incorporar más etiquetas para hacer prácticas. 
Por ejemplo, trate de incorporar una fila para cada una de las siguientes 
etiquetas <h1>, «pre», <ul> y «li», <a>, <i> y <b> e <img>. Para el 
ejemplo de img, tendrá que copiar una imagen en la carpeta que ha creado 
para este ejercicio y llamarla imgl.jpg. 


3. Compruebe cómo queda la página con los ejemplos anteriores. 


<td><p>Ejemplo de párrafo</p></td> 
</tr> 
<tr> 

«td»&lt;hl&gt;«/td» 


<td><h1>Título 1</h1></td> 
</tr> 
</table> 
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<tr> 


«td»&lt;ul&gt;, &lt;li&gt;«/td 
<td><h1>Título 1</h1></td> «td» 


«ul» 
«li»Elemento 1«/li» 
«td»&lt;pre&gt;«/td» «li»Elemento 2«/li» 
<td><pre>Texto pre formatea d «li»Elemento 3</1i> 


<tr> 
<td>81t;a8gt;</td> 
<td><a href="http://ww.google.com">Google</a></td> 


«td»&lt;i&gt;, &lt;b&gt;«/td» 
<td><i>Itálica</i><br><b>Negrita</b></td> 
</tr> 
</table> 


<tr> 
«td»&lt;img&gt;«/td» 
<td><img src="imgl.jpg” alt="Mi Imagen" width=150 height=120></td> 
</tr> 
</table> 


E > C |Ota. e| : 
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12. JSON 





JSON (JavaScript Object Notation) es un formato Importante 
de intercambio de datos bastante ligero que puede ser 
tratado por casi todos los lenguajes de programación. 
Es una alternativa a XML y existen multitud de utili- 
dades que convierten ambos formatos entre sí. Se de- 
fine dentro del estándar de lenguaje de programación 
ECMAScript (ECMA). 


Básicamente, JSON posee dos estructuras: 





e Una colección de pares de nombre/valor: 
objeto (o registro, estructura, etc.). 
e Una lista ordenada de valores: vectores o listas. 


Puede representar los siguientes tipos de datos primitivos: cadenas de texto, nú- 
meros, booleanos y valores nulos. También es posible definir dos tipos de datos 
estructurados: objetos y arreglos. 


Cada pareja atributo/valor se define de la siguiente manera: 


"nombre": "Juanto" 


En este caso, el atributo es “nombre” y el valor “Juanto”. Los atributos siempre se 
encierran entre comillas (^). Los valores también excepto los numéricos que van sin 
comillas. Los objetos se encierran entre llaves de la siguiente manera: 


“codigo”: 1, 


"nombre": “Juanto” 





Vemos que cada pareja atributo/valor se separa de la anterior por una coma (,). Los 
arreglos se encierran entre corchetes [] y separan sus valores entre comas. Por ejem- 
plo, si definimos el atributo "aficiones" con varios valores, podemos usar un arre- 
glo de la siguiente forma: 
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“aficiones”: [“Leer”, “Escribir”, “Musica”] 


Los valores pueden ser valores simples o también objetos que a su vez pueden con- 
tener objetos y así sucesivamente. Por ejemplo, podríamos definir el objeto personas 
como un conjunto de objetos de la siguiente manera: 


“personas”: 


“codigo”: 1, "nombre"; *JTuanto” 


“codigo”: 2, “nombre”: “Miquel” 


“codigo”: 3, “nombre”: “Andres” 





Existen muchas utilidades que nos permiten tratar archi- W sonun esos 
vos JSON validando su formato, convirtiéndolo a XML, 
exportándolo a otros formatos como CSV, normalizando E" ases 

su indentación, etc. Por ejemplo, puede usar un valida- "codigo": 1, 
dor en línea llamado JSONLint en el siguiente URL: ht- : pan 
tps://jsonlint.com/. Si acude a dicha página e introduce : 
el código anterior en la caja de texto preparada a tal efec- 
to y pulsa sobre el botón Validate JSON podrá compro- 
bar si la estructura es correcta o no. 


Podemos utilizar también visores para inspeccionar los 
datos y navegar por ellos como, por ejemplo: http://json- 
viewer.stack.hu/. Si accede a esta página y copia el con- validatejson | | Clear 
tenido del ejemplo anterior, puede pulsar en la pestaña 
Viewer para ver la jerarquía de la información y navegar 
por ella. 


Results 











FG £r|O rm A STA D por A O 


e n 
/ Q Onlico ison xe AA J Q Ontina son vie x AU, 








go" 
“nombre”: 


" í 
S cogo 3 "codigo"! 3, 
E nombre , "Andres" "noztre^; “Angres” 
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Por último, mostraremos otra utilidad muy completa (Code Beautify) que per- 
mite diferentes acciones que pueden resultar muy interesantes como, por ejemplo, 
validar, normalizar, convertir, exportar, editar código JSON, etc. Puede encontrar 
esta utilidad en https://codebeautify.org/jsonviewer. Por favor, introduzca el código 
anterior en esta utilidad y pruebe alguna de sus funcionalidades como, por ejemplo, 
la de Tree Viewer para ver la estructura de forma jerárquica y poder navegar por la 
misma, Minify para reducir el tamaño al máximo o JSON to XML para convertir 
un archivo JSON a XML. 





J Cb Basi Orien ISO Viene x ^ V 


* Q Q | ts soguro | httpz//codebeaubfy.org/sorivwer 





® Code Beautify JSON Fotmamer |My 1p | Search| Recent Links] Sampie) More ~| Signini (7) i 


JSON Viewer 


JSON Input la sample x R3 | Result moce: Result : Tree Viewer au | 
me v 


Mu ize 
EEN 


D) v ject (1) 


da PA 


L 
e 





Result : JSON to XML as e f 





1 <?xml version-"1.0" encoding-"UTF-8" 
?> 

2* «personas» 

3 <codigo>1</codigo> 

EH «nombre» Juanto« /nombre» 

5  «/personas» 

6” «personas» 

7 «codigo»2«/codigo» 

8 «nombre»Miquel«/nombre» 

9 «/personas» 

10* «personas» 
«codigo»3«/codigo» 
«nombre»Andres« /nombre» 

personas» 





En el siguiente ejercicio, vamos a fabricar una pequefia aplicación que simplemente 
nos permita mostrar en el navegador y también en su consola cómo podemos crear, 
acceder y mostrar alguno de los valores de una estructura JSON. 


1. En primer lugar, nos ubicaremos en Ej100 angular y crearemos el proyecto 
tecleando ng new intJSON. 
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2. Seguidamente, renombraremos el proyecto ubicándonos en Ej100_angular, 
y escribiendo lo siguiente: 





C:NEj100 angular»rename intJSON 082 intJSON 





A continuación, abrimos el proyecto con nuestro editor y modificamos la 
clase AppComponent del fichero app.component.ts para cambiar el tí- 
tulo por defecto y afiadir algunas definiciones de objetos de JSON. 


export class AppComponent { 
title - '082 intJSON'; 
persona - ( 
"codigo":1, 


"nombre" :"Juan", 


"aficiones":["Leer","Escribir","Musica"] 


( "codigo": 1 
( "codigo": 2, "nombre": "Miquel" ), 
( "codigo": 3 


+ "nombre": "Juanto" ), 


, "nombre": "Andres" ) 





3. Podemos ver que hemos creado un objeto persona con 3 atributos (codigo, 
nombre y aficiones) y en el caso de aficiones, hemos creado un arreglo 
con las diferentes aficiones que posee esa persona. Podemos ver también que 
se ha creado un array de personas que incluye tres objetos persona cada uno 
de los cuales solo tiene codigo y nombre. 


4. A continuación, vamos a definir en nuestro archivo styles.css algunos 
estilos para mejorar la presentación. 


.verde ( color: green; padding: 2px; margin: 2px; 
font-weight: bold; font-size: 20px; ] 
.divEjemplo ( padding: 2px; margin: 2px; 
border: 2px solid blue; 
background-color: #CEF6F5; ) 
.divPersonas { padding: 2px; margin: 2px; 
border: 2px solid blue; 
background-color: #A9E2F3; ) 


-divPerson { padding: 2px; margin: 2px; 


border: 1px solid green; 
background-color: #81BEF7; } 





5. Ahora, modificaremos el archivo app.component.html para modificar el 
contenido que posee por defecto y mostrar los objetos que contienen JSON. 
Tras el título, insertaremos un primer bloque para mostrar el objeto persona 
en formato JSON y también, cada uno de sus atributos y valores. 


6. Seguidamente y detrás del bloque anterior, añadimos el objeto array de 


personas también en formato JSON y luego, cada una de las personas en 
formato JSON. 
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<div> 
<h1>((title))</h1> 
<div class-"divEjemplo"» 
<span class="verde "»persona:«/span»«br» 
<div class-"divPerson"»(( persona | json ))</div> 
«div class-"divPerson"»Codigo: «b»(( persona.codigo ))</b></div> 
«div class-"divPerson"»Nombre: «b»(( persona.nombre ))</b></div> 
«div class="divPerson">Aficiones: «b»[( persona.aficiones ))</b></div> 
</div> 
</div> 


<div class-"divPerson"»Aficiones: «b»(( persona.aficiones ))</b></div> 


</div> 

<div class-"divEjemplo"» 
<span class="verde”>personas:</span> 
<div class-"divPerson"»(([ personas | json ))</div> 
<span classs"verde"»persona 1:</span> 
<div class-"divPerson"»(( personas[0] | json ))«/div» 
<span classz"verde"»persona 2:</span> 
<div class="divPerson">(f(í personas[1] | json ))«/div» 
<span class="verde">persona 3:</span> 
<div classs"divPerson"»(( personas[2] | json ))</div> 





7. Enel áltimo bloque que afiadiremos a continuación del anterior, y mediante 
*ngFor, recorremos el array de personas y mostramos por separado cada 
una de las mismas con sus atributos y valores. 


«div class-"divPerson"»(( personas[2] | json ))«/div» 
«/div» 
«div class="divPersonas container" *ngFors"let persona of personas; let i » index"» 
<span class-"verde"»persona (( i + 1 )):</span> 
<div class="divPerson container”> 
Codigo: 
€«b»(( persona.codigo ))</b> 
«br» Nombre: 
€«b»(( persona.nombre ))</b> 
«/div» 





8. Guardamos todo y arrancamos la aplicación en 
el navegador para ver la información de cada lo... + 
bloque. 
082 intJSON 
9. En app.component.ts podemos añadir 
el método ngOnInit() para mostrar por 
la consola la información de los objetos de 
forma parecida a como lo hemos hecho en 
HTML. Lo afiadiremos detrás de la definición 
de personas y antes del cierre de la clase 
AppComponent. Definiremos la función con 
un conjunto de llamadas a console.log para 
mostrar la información de diversas formas. 
Observe que en ngOnInit() hemos usado 
JSON.parse para crear un nuevo objeto, y que 
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usamos también JSON.stringify para elaborar un string con el contenido 


del objeto tratado. 


( "codigo": 3, "nombre": 


] 
ngonInit()( 
var nuevoObjeto - 
console. log("Codigo 
console. log("Nombre 


console.log("Persona : 
console.log("Personas: 


console.log("Personas 
console.log("Personas 
console.log("Personas 
console.log("Personas 
console.log("Personas 
console.log("Personas 


“Andres” ) 


" 4 nuevoObjeto. codigo); 

* + nuevoObjeto.nombre); 

" + JSON.stringify(this.persona)); 
" + JSON.stringify(this.personas)); 
(1) - codigo: " 4 JSON.stringify(this 
(1) - nombre: " + JSON.stringify(this 
(2) - codigo: " + JSON.stringify(this 
(2) - nombre: " + JSON.stringify(this 
(3) - codigo: " + JSON.stringify(this 
(3) - nombre: " + JSON. 


stringify(this 


console.log(this.personas); 





JSON. parse( ' (" codigo" : "2", "nombre":"Paco")'); 


.personas[0].codigo)); 
.personas[0].nombre)); 
.personas[1].codigo)); 
.personas[1].nombre)); 
.personas[2].codigo)); 
.personas[2].nombre)); 


10. Abra el navegador (p. ej., en Google Chrome con CTRL« MAYUS + I) y 
analice las salidas por la consola. Vea cómo al mostrar el objeto personas 
al final de todo es posible desplegarlo pulsando sobre las flechas que lo 
acompañan para ver su estructura. 


50 
S | top 
Codigo : 2 
Woebre : Paco 
Persona : 
Personas: 


Personas (3) - 


va: 
codigo: 3 


length: 3 


production mode. 


>] 





Elüments ^ Comsole — Sources  Mutwork — Performance — Memory Application — Secunty » 





v ||riter Default levels Y 


“Juento” 
“Miquel” 


"Andres" 


nombre: "Miguel" 
prote : Object 


nombre: "Andres" 

b proto : Object 

b  asroto  : Array(8) 
Anguler is running im the development wode. Cell enableProdwode() to enable the 





app.component.ts:21 
app.component.ts:22 


(" codigo" : 1, *ncabre" : “Juan”, "af cones": ["Leer* , "Escribir", "Musica"]] 
[(" codigo" : 1, "nombee* : *3uanto* ) , (" codigo" : 2, *nosbre" -"Miquel*], 
[7codigo":3, "nombre": "Andres" ) ] 

Personas (1) - codigo: 1 

Personas (1) - nombre: 
Personas (2) - codigo: 2 
Personas (2) - nombre: 
Personas (3) - codigo: 3 
nombre: 
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Lo Google: Herramientas 
de desarrollador 


Las herramientas para desarrolladores nos permiten 

analizar diferentes aspectos de nuestra aplicación web 
como son el rendimiento, su composición, el uso de 
memoria, etc. Por ejemplo, Google Chrome (CTR- 
L+MAYUS+I), Internet Explorer (F12), Mozilla 
Firefox (CTRL+MAYUS+I) ofrecen un menú similar 
para realizar las mismas acciones. 


A continuación, tomando como ejemplo Google 
Chrome, comentamos brevemente cada una de estas 


opciones. 
Comentario 


Permite seleccionar un elemento de la página (CTRL+MAYUS+0C). 





Simula la visualización de nuestra aplicación en un dispositivo 
(CTRL+MAYUS+M). 


Elements Permite analizar el estado del elemento HTML o CSS seleccionado 
y, además, es posible editarlo. Para deshacer cambios basta con pul- 


sar CTRL+Z. 


Console Permite ver los mensajes de error y advertencias y también es muy 
útil si usamos console.log(“texto”) en nuestros métodos para reali- 
zar alguna traza. 

Sources Permite abrir cualquier componente de la web ofreciendo una estruc- 
tura jerárquica y en árbol de los mismos y también permite depurar. 

Network Muestra el panel Network donde visualiza información sobre el 
rendimiento y actividad de red. 


Performance | Muestra el panel TimeLine para analizar la actividad en tiempo de 
ejecución. 
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Memory Muestra el panel Profiles y permite analizar el tiempo de ejecución 
y uso de memoria. 


Application | Administra almacenamiento y BBDD. 


Security Muestra el panel Security, que permite depurar problemas con 
nuestro certificado y otros. Analiza la seguridad general de una 
página. 


Audits Muestra el panel Audit, que analiza la página cuando se carga y 
ofrece sugerencias para mejorar su rendimiento. 


Augury Permite depurar aplicaciones y visualizar la aplicación mediante he- 
rramientas gráficas. 


En el siguiente ejercicio, mostraremos algunas de las funcionalidades para que poda- 
mos ver cómo acceder y manejar las opciones del menú de herramientas de Google 
Chrome. 





Podríamos utilizar cualquier página web, pero, en nuestro caso, nos basaremos en 
la aplicación realizada en el ejercicio 028 dirNgStyle al que afiadiremos un bloque 
de salidas por Console. 


1. Abrimos el ejercicio con nuestro editor (p. ej., Atom) y añadimos el siguiente 
bloque en app.component.ts detrás de la clase AppComponent: 





defineEstilos()í 


return styles; 


) 


ngAfterContentCheckea () ( 





console.]l 





wv 


console.log("hayLetraGrande ",this.hayLetraGrande); 








v 


console.log("hayColorFondo ",this.hayColorFondo); 








vw 


console.] LetraColor ",this.hayLetraColor); 

















console.]1 ",this.hayLetraIltalica); 




















con 








Seguidamente nos ubicamos en C:NEj100 angularN028 dirNgStyle y 
arrancamos la aplicación tecleando ng serve. 
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:1EJ1068_angular>ronawo dirNgstylo 028 dirWgstyle 
:XFjie8 angular»cd G2E dirNgstylo 


:1EJ1068_amgulari628 dirWgstylo»ng sorve 
** NG Live Development Servar is running on http://lacalhozt:4200. ** 


ash: e$73563592. 

me: 127335 
(6) polyfillz.bundle.jz, polyfillz.bundle.map (polyfills) 234 kB (4) [initial] [rendered] 
11) main bundle, js, main.bundle.map (main) 4.03 kB (3) [initial] [rendered] 
12) styles.bundle.js, styles.bendle,map (styles) 9.71 kB (4) [initial] [rendered] 
43) vendor. bundle, js, vendor.bundle.map (vendor) 2.63 MB [initial] [rendered] 
{4} inline.bundle,js, inline.bendle.nmap (inline) € bytes [entry] [rendered] 

pack; Compiled successfully. 





2. Abrimos el navegador y tecleamos el URL http://localhost:4200 para acceder 
a nuestra aplicación. 


a 
* V 


028 dirNgStyle 


Texto2 


Ote metam 


ux 
/ Q9 one un 


€ 0010 O arpento] 





» en rats 


028 dirNgStyle mz e 


AS 

Argier 35 neming in the development mesa m] 

Call esaklsProeFtee|] to anable the gradectloe sede 
ARA 
cena pmi .biilf 
AAA 
tad 
AM ed de 
Ami. campa tari 1310 





4. Si pulsamos sobre los checks Tamaño y Color, veremos que las variables 
hayLetraGrande y hayLetraColor pasan a valer true. 


[X A] | Elements Console 





v | Filter 


hayLetraGrande true 


hayColorFondo false 


hayLetraColor true 


hayLetraItalica false 
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Podemos jugar un poco sobre la pestaña de Console pulsando sobre el 
icono (9) y limpiando el contenido de la misma. Introducimos un filtro (p. 
ej., color) para mostrar solo aquellos mensajes que contengan dicho texto. 
Pulsamos sobre el botón Console settings (&) para mostrar más opciones 
y marcar Show timestamps para añadir la hora a cada mensaje. Podemos 
realizar un sencillo cálculo mediante la función eval (p. ej., eval(2*3+4)) 
en el prompt (>) de la Console. 

(X a 

O |t 

B Hide network 


Elements Console Sources Network Performance >» MEC: 
ov [me epe leveis V B items hidden by filters [e] 

(3 Log XMLHttpRequests 
B Preserve log 


Show timestamps 


B Selected context only Autocomplete from history 


E User messages only 


[1 :05:15.297]bavcolorFondo 
11:05:15.297 hayLetreColor 
11:05:21.832 hayColorFondo 
11:05:21.833 hayLctraColor 


apo. component, ts:27 
app. component. ts: 28 
app. component. ts:27 
app. component.ts:28 








6. A continuación, seleccionaremos la opción Elements y observaremos que 


muestra el código fuente de la página además de información sobre sus 
estilos, eventos, breakpoints y propiedades. 


Console Sources Network Performance » 


n 6l | Elements 


IDOCTYPE html» 
(ntm > 


b <head>...</head> 


b«app-root nz-versLon-*2.4.10^ nghost-c1f-8».«/app-root» 


<scriot typc-"text/javascript" 
<script type-"text/javazcript^ 
<scriot type="text/javascript” 
<script type-"text/javascript” 
¿script type-"text/javascript^ 


src-"in 
src-"poivtrills.buncie.js"»«/script» 
src=" styles bundle, is"></script> 
src-"vendor.bundle.is"»4/script? 


&rc-"main.hundle.]s"»4/script» 


| </body> 
</html> 


| Styles | Event Listeners. DOM Breakocints 


Filter :hov cais +, 


element, style i 


7 
body { xo 


font-family: -apple- 


systen, systen- 
ui,BlinkMacSyztemFont,"Sego 
UI",Roboto,"Helvetica 
Neue", Arial, sans-serif; 

font-size: 1rem; 

*ont-weignt* 488; 

line-height: 1.5; 

color: B 32320?c; 

background-color: []$*ff; 





Hiter 


> bockground-color 





Tecleamos CTRL+MAYUS+C (o pulsamos sobre el icono [v ) y 
seleccionamos el bloque inferior que contiene “Texto”. En la parte inferior 
derecha de la ventana, veremos que hay una serie de rectángulos contenidos 
entre sí que al pasar el puntero del ratón por encima de los mismos van 
resaltando en la página el aspecto asociado a cada rectángulo (position, 
margin, border, padding y contenido). 
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8. Podemos observar también que en la parte superior izquierda aparece 
destacada la etiqueta div, en la que se muestra entre otras propiedades: el 
estilo, el color de fondo, el tamaño, etc. Si marcamos los checks Tamaño, 
Fondo y Color, observaremos cómo cambian los valores dentro de cada 
propiedad correspondiente. 


m Ó | Elements Console Sources Network Performance » 
<br ngcontert -Jkc-8» 





[x &l Elements Console Sources Network Performance 


s3- container div2' ne-reflect-ne- style 
[object Object] * 380$; background-color: rgb(Ss, 
258 ); color: red; font-style: normal; Texto-/div> == $8 





9. Para acabar, podríamos simular la visualización de nuestra aplicación en un 
dispositivo móvil pulsando CTRL+MAYUS+M o bien pulsando sobre el 
botón (4)). 


Dort dehet 
Port gato tee 
Periit - head 
3 : 3 Lavfazipa - detudt 
[Q ons * WA Lanvincape - vanas bar 
€ 5 COIDO ionic Lendicepe - btyteerd 
s man E asos [] mu EN 


sox Y zae 





ivre (rece vone 
Sho eua quarn 
hos rem 


As derce onmi nato 


Au) dect ype 
Asewo toring 


Captsm create 
Captum dilse comae 


Reve de dents 
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5:5... Control de versiones 
Git: Instalación, 
configuración y uso 


Git es un sistema de control de versiones libre y de 
código abierto. Como todo sistema de control de ver- 
siones, Git registra los cambios realizados sobre un 
archivo o conjunto de archivos a lo largo del tiempo, 
de manera que se puedan recuperar versiones específi- 
cas cuando sea necesario. Además, Git es fácil de usar, 
rápido, eficiente y el editor Atom le da soporte. Por 
todo ello hemos pensado que sería interesante incluir 
este capítulo en el libro para ver sus conceptos de uso 
básicos. 


Importante 


Los fundamentos básicos de Git son los siguientes: 





e Esunsistema de control de versiones distribuido. 
Los clientes replican completamente el repositorio 
de versiones de un servidor central. A posteriori esto permite a los clientes 
realizar casi todas las operaciones de forma local evitando problemas de red. 
Además, se mejora la seguridad en el sentido de que si el servidor central falla, 
siempre es posible recuperar el repositorio a partir de cualquier cliente. 

e Un proyecto Git tiene tres partes principales: el directorio Git con el 
repositorio de versiones y otros elementos de Git, el directorio de trabajo 
con una copia de una versión del proyecto sacada del directorio Git para su 
uso y modificación, y el área de preparación, un archivo del directorio 
Git con los ficheros modificados preparados para la próxima confirmación 
(commit). 

e Los ficheros del directorio de trabajo pueden estar bajo seguimiento 
(tracked) o sin seguimiento (untracked) por parte de Git, como 
sería el caso de los ficheros nuevos acabados de crear. Los ficheros bajo 
seguimiento (tracked) pueden estar sim modificar, modificados o 
preparados (staged). El flujo general de trabajo consistiría en modificar 
archivos del directorio de trabajo, prepararlos para que se incluyan en la 
próxima confirmación (commit) y finalmente realizar la confirmación 
(commit) para guardar los cambios en el repositorio. 


Para empezar a usar Git, el primer paso será instalarlo. Para ello nos desplazare- 


mos https://git-for-windows.github.io/, y descargaremos el instalador para Win- 
dows. Luego lo ejecutaremos seleccionando todas las opciones por defecto. Una vez 
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instalado, tendremos tanto la versión de línea de comandos como la interfaz gráfica 
de usuario estándar. 





Download Contribute 





Seguidamente pasaremos a configurar un nombre de usuario y email. Esta in- 
formación es importante porque Git la utiliza y vincula a las confirmaciones (com- 
mit) que realicemos. Configúrelo indicando sus propios datos: 


C:X>git config --global user.name "Miquel" 


C:X>git config --global user.email miquel(example.com 





Ejecutando "git config -list" puede confirmar la configuración. 


Vamos a seguir practicando con Git en un proyecto Angular: 


1. 


Nos ubicaremos en ej100_angular, y crearemos el proyecto tecleando ng 
new testGit. Seguidamente lo renombraremos para que haga referencia a 
nuestro número de ejercicio ejecutando rename testGit 084_testGit, y 
finalmente lo abriremos con Atom. 


Atom da soporte Git para la mayoría de operativas más comunes, pero para 
las más especializadas es probable que necesitemos usar la versión Git de 
línea de comandos. Para visualizar la ventana Git de Atom, seleccionaremos 
la opción “Packages/GitHub/Toggle Git Tab” del menú. 


Para usar Git en el nuevo proyecto, primero deberemos crear su 
repositorio de versiones. Esto lo haremos desde la ventana Git de Atom 
seleccionando la opción “Create repository” e indicando que lo cree en 
C:1Ej100_angular1084_testGit. Con esta acción crearemos el subdirectorio 
Git (“.git”) con el repositorio. 


En este momento, todos los ficheros del proyecto están sin seguimiento 
(untracked). Aparecen todos en “Unstaged Changes” con un icono verde. 
Sin embargo, si se fija bien, realmente no aparecen todos. Por ejemplo, no 
aparecen los ficheros descargados con npm (directorio/node_modules) 
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para los que no tiene sentido realizar ningún seguimiento. Esto es así gracias 
a las excepciones indicadas en el archivo .gitignore que se creó de forma 


automática al crear el proyecto con “ng new...”. 


Para empezar a controlar sus versiones, 
primero deberemos ponerlos bajo seguimiento 
(tracked). Para ello tendremos que hacer 
una confirmación inicial con todos ellos: 
pulsaremos la opción "Stage AII", pondremos 
nombre al commit, por ejemplo, "version 
inicial", y pulsaremos "Commit". 


Ahora los ficheros están bajo seguimiento 
(tracked) de Git. Si realiza una modificación, 
por ejemplo, en el fichero src/app/app. 
component.ts, este fichero pasará a estado 
modificado y aparecerá en "Unstaged Changes" 
con un icono amarillo distinto al que veíamos 
en el punto 4. A partir de aquí, puede realizar 
todo tipo de acciones desde esta misma 
ventana: 





V2 Stayed Changes 
E aperiam 
D) «druarurtg 
B] gtgror 


[E README má 


E] leppida 


El eeucopots 


version inicial 


a. Para un fichero modificado, puede hacer clic para ver los cambios 
respecto su última confirmación, puede hacer doble clic para ponerlo 
en estado preparado (staged), o también puede deshacer los cambios 
desde el menú contextual (clic derecho) del fichero. 


-Ba untajod Changes fec scaphapo Lon ponant t €) gas 


NN ego BN 


me 16 wart = "wolont'; 


:"muvgu 
rebran 





Uny Angs se Lan rong. ec 


5 Unipa Chaeges $ Stage AI 


= maget Demas 





b. Puede deshacer la preparación (staged) de un fichero con un clic. 
c. Puede crear una nueva confirmación (commit) con los ficheros 


preparados (staged). 
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La mejor forma de ver el histórico de confirmaciones realizadas es hacerlo a 
través de la aplicación “Git GUI”, o sea, la versión Git con interfaz gráfica incluida 
en la instalación. Para ello ejecute "Git GUI”, abra el repositorio C:1Ej100_angu- 
lar1084 testGit, y seleccione la opción “Repository/Visualize master's History". 
Tendrá una vista similar al de la imagen. 


sz: 084 testisit: master - gitk 
File Edi Vie» Help 


aa versión 2 Miquel «miquel&esample co 2017-12-05 18:40 03 
Maus emanan cs POT Se 


1 version Inicia! Miquel «miquelgrexample.co 2017-12-05 15:37:04 





283c5055480696:358d9b33b7 5 Row[ zif zf E 
Fina [qe ||] comme ings 0009 
Search | @ Patch O Tree 


i) Dif O Okdwersion O Newversion Linas of contet E! 
mild: PAR Ira aterra a |?!Cpplapp.componentts 





7,4 +7,5 B8 import [ Component | from ‘angul 


export class ÀppCuopcoent | 
ticle = 'app': 








Por último, comentar que podemos trabajar con repositorios remotos para faci- 
litar la colaboración en un proyecto Git. Veamos, brevemente, cómo podemos crear 
uno en GitHub (servicio host para repositorios Git): 


1. Primero nos situaremos en https://github.com/ y crearemos una cuenta para 
poder usarlo. 


2. Seguidamente creamos un repositorio con el mismo nombre que nuestro 
proyecto y nos apuntaremos el URL que nos devuelva la operación. 


3. A continuación, añadiremos el repositorio remoto, que llamaremos “origin” 
en nuestro proyecto de la siguiente forma. Hay que introducir el URL que 
habíamos obtenido en el punto anterior. 


C:1Ej100_angularl084 testGit>git remote add origin ht- 





tps://.../084 testGit.git 


Y por ültimo enviaremos nuestro repositorio local al repositorio remoto con 
el siguiente comando: 


C:NEj100 angular V084 testGit»git push -u origin master 


Desde GitHub puede comprobar que se ha subido todo el repositorio local. 
En la vista principal puede ver los ficheros con su id. de versión (nombre del 
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commit donde se realizó su último cambio), y también puede observar la 
opción que nos permitiría ver el histórico de confirmaciones. 





KB 3 commits | | 1 branch DO releases 44 0 contributors 








Brande master» | New pull request | Create new file | Upload fies | Find Sie | Chos 


Miquel version 2 Latest commit 9aced71 22 minutes ago 


B ele 25 minutes ago 
im scc 22 minutes aga 


E] .anqular-ci.json version inicial 25 minutes ago 





editorconfig version inicial 25 minutes ago 
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o jQuery: Parte I 





jQuery es un framework JavaScript que simplifica la 

ión de páginas web. La biblioteca que apor- 
programación de pág que ap 
ta simplifica parte de la problemática de trabajar con 
diferentes navegadores y sus particularidades. La decla- 
ración de intenciones de jOuery es "escribir menos 
para hacer más" (^write less, do more"). La pri- 
mera versión de jQuery fue desarrollada en 2006 por 
John Resig y la última versión puede obtenerse desde 
la web de jQuery ubicada en la siguiente dirección: 


http://jquery.com/download/. 





JNE Demricad Jew]: MD 


€ > C Q |Q juerycom/cowninac 


jQuery 


write less, do more 
Download  APiDocumentation Biog Plugins Browser Support 


Downloading jQuery 

Campressed and uncompressed copies of ¡Query fies are evadat] 
compressed Me saves bandwedth and improves pertormance in pi 
wih a compressed Me The map flle is oot required for users to ny 


1.11072 10 the FI seorcehanpiaguitt comment is not included 


To tocaly download these files, nahi-cick the Ink and select "Sav 


iQuery 


Far help when upgrading jQuery, please see the upgrade guide m 
plagin 


Dowrioxd the com d. production ¡Query 3.2. 1 





A modo de resumen, los temas que trata jOuery son: 


e DOM: estructura que contiene los diferentes objetos existentes en un 
documento cargado en el navegador (document objet model) o, lo que es 
igual, modelo de objetos del documento. 

e Selector: expresión mediante la cual podemos seleccionar uno o varios 
elementos que cumplen con un determinado criterio (filtros: contains, 
ends with, starts, etc., genéricos: .class, element, #id-). 

e Atributo: de elementos (attr(), prop(, val(, removeAttr(), removeProp(, 
etc.), de clase (add Class(), removeClass() y hasClass()). 
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e Eventos: suceso que se produce en un sistema como consecuencia de una 
acción interna o externa al mismo y que este es capaz de detectar y controlar 
(p .ej. click, focus, keydown, etc.). 

e Efectos: básicos (hide(), show() y toggle()), personalizados (animate(), 
delay(), finish(), stop(), etc.). 

e Formularios: obtener o establecer el valor de un control de un formulario. 


jQuery es un tema extenso y aquí solo pretendemos presentarlo y realizar algún 
ejercicio. Invitamos al lector a profundizar un poro más consultando el libro de esta 
misma colección denominado: Aprender jQuery con 100 ejercicios prácticos. Des- 
cargaremos la librería de la siguiente página: http://jquery.com/download/. Pode- 
mos descargar la librería con el texto "Download the uncompressed, develop- 


ment jQuery x.y.z". "z.y.z" será el valor de la versión que dependerá del momen- 
to en el que el lector se la descargue. 





1. Nos ubicaremos en Ej100 angular y crearemos la carpeta 085 jOuery I 
tecleando lo siguiente: 


C:1Ej100_angular>mkdir 085 jQuery I 


En la carpeta, depositaremos la librería descargada de jQuery y la renombra- 
remos como jquery.js. 


2. En la carpeta, crearemos una página HTML llamada Hola Mundo.html con 
el siguiente contenido: 


«html» 
<head> 
<title>085 jQuery (1)</title> 
<script type-"text/javascript" src-"jquery.js"»«/script» 
«script type-"text/javascript"» 
$(document).ready(function () ( 
$("body").css("color", " blue”); 
); 
</sertpt> 


</head> 


<body>Hola Mundo</body> 





</html> 


La librería no contiene ninguna ruta ya que esta se halla en la misma carpe- 
ta que nuestra página. 
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> Disco local (C:) > Ej100 angular > 085 ¡Query | 


^ 


Nombre Tipo 


jquery.js Archivo JavaScript 
€ Hola Mundo.html Chrome HTML Document 





3. La función principal de ¡Query ($() o función jQuery) utiliza el método 
ready() para determinar cuándo se ha cargado completamente el DOM y, 
entonces, cambiar el color del body a azul seleccionando el body y aplicando 
css. Guarde la página y obsérvela en el navegador. 


D 685 ¡Query () 


€» e onus. a «|y. 
» | 


Otros marcadores 


Hola Mundo 





4. Ahora en el body, añadiremos un párrafo y dos div (id="mild” y 
class="miClase”) para usarlos con css. 


5. Ahora, la función ¡Query queda de la siguiente manera: 


«script type-"text/javascript"» 
$(document).ready(function () ( 
S(*p").oss("color", "“blue”) 


1ld").css("color", Yredg"); 





iClase").css("color", “green”); 


</script> 





Y el body contendrá: 
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<body> 
«div id="bloque”> 


Hola Mundo 





<p>Esto es un parrafo</p> 


«div id="mild“>Esto es un bloque div con identificador</ 


dy 


«div class-"miClase"»5Esto es un bloque div con clase</ 


div> 


</div> 


</body> 





Guardemos la página y veamos cómo queda en el navegador. 


6. Por último, añadimos dos botones para poner/quitar un fondo y un marco 
usando la clase toggleClass. 


7. Para ello, modificamos la función jQuery para que contenga lo siguiente: 


$ (document) .ready (function () ( 
S$(*p").css("color", “blue”); 
$ (“mila”) -css (“"color”, “red”); 
$(“.miClase”).css(“color”, “green”); 
$ (“ibot_fondo”) .click(function () ( 
$ (“fbloque”) .toggleClass (“fondo”); 


)); 


$("4bt marco").click(function () ( 


$ (“fbloque”) .toggleClass (“marco”); 





Detrás de la etiqueta </script> y antes del cierre de </head> añadiremos este 
bloque para el estilo: 
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<style> 


.fondo { background: #58FAF4; } 


.marco [ color: blue; border-style: solid; border-width: 
3px; ] 


«/style» 





Y el body, para que quede así: 


«body» 
«div id="bloque”> 
Hola Mundo 
<p>Esto es un parrafo</p> 


«div id-"mild"»5Esto es un bloque div con identificador</ 


div» 


«div class-"miClase"»5Esto es un bloque div con clase</ 


div» 
epe» 


«input type-"button" value-"Fondo" id-"bt fondo" /» 





«input type-"button" value-"Marco" id-"bt marco" /» 
«/div» 


«/body» 





Guardamos la página y la recargamos en el navegador. Probamos pulsando 
el botón Fondo, pulsando el botón Marco y pulsando ambos botones. 


j T) 065 jQuery 1) x i E D) 085 jQuery 0) x WA 


€ > O A |On & «t| 3 i 
»| | Ovosmard aiz isa 


Hola Mundo 


Esto es un parrafo 


Esto es un bloque div con identificador 
Esto es un bloque div con clase 





Descargado en: eybooks.com 
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555. jQuery: Parte Il 





En el siguiente ejercicio, vamos a realizar una prueba con los métodos básicos 
hide(), show(), toggle(), fadeIn() y fadeOut() y, posteriormente, añadiremos al- 
guna animación con los efectos animate(), delay() y slideToggle(). 


1. Nos ubicamos en Ej100 angular y creamos la carpeta 085 jOuery II 
tecleando lo siguiente: 





:NEj100 angular»mkdir 085 jQuery II 





En la carpeta, depositaremos la librería descargada de jQuery del ejercicio 
anterior. 


2. En la carpeta, crearemos una página HTML llamada 086 jQuery II.html 
con el siguiente contenido: 


€ > e a [O neuc x] i 


» | Otros marcadores 
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«!DOCTYPI 





«html» 
<head> 
<title>085 jQuery (11)</title> 
<script type = "text/javascript" src = "jquery.js"» </script> 
<script type = “text/javascript”> 
$ (document) .ready (function () ( 
$("£b hide").click(function()( $(“*d1”) ..hide(); resaltar (“hide”); ]); 
$("4b show").click(function()( $("4d1").show(); resaltar (“show”); )); 
$("£b toggle").click(function()($("£d1").toggle();resaltar("toggle");]); 





$("4b reset").click(function()(location.reload();]); 
function resaltar(texto)í 


S(“fres”).html (texto) . fadeO0ut (1000,'* linear”, function ()( 
$(this).html("").fadeIn(); 


«/script» 
«style» 
div (width: 240px;height:90px;background-color:400BFFF; margin:lpx; padding:lpx; 
border-style:groove;border-width:5px; font-size:18px;) 


div*tdl (width: 220px;height:70px;background-color:440FF00; margin:4px; paddin- 
g:lpx; border-style:groove;border-width:5px; font-size:18px;) 





diviímsg (width: 240px;height:30px;background-color:480FF00; margin:lpx; paddin- 
g:lpx; border-style:solid; border-width:5px; font-size:25px;border-color:ft- 
0000FF;text-align:center;) 


«Ch (width: 80px; height:30px;) 
.cbr (width: 254px; height:30px;] 
«/style» 
</head> 
<body> 
<center> 
<table border=1 bgcolor-"fA9F5F2"» 
<tr><td colspan=3><div><diw id-"dl"»«/div»«/div»«/td»«/tr» 
SUE 
«td»«input type-"button" value-"hide()" id-"b hide" class-"cb"/»«/td» 





«td»«input type-"button" value-"show()" id-"b show" class-"cb"/»«/td» 





«td»«input type-"button" value-"toggle()" id-"b toggle" class-"cb"/»«/td» 


«/tr» 


<tr><td colspan-3»«div id-"msg"»«font color-"red"»«span id-"res"/»«/font»«/ 
div></td></tr> 


<tr><td colspan=3><input. type-"burttan" value-"teset" id-"b reset” class-"e= 
br"/></td>E/tE> 





</table> 

</center> 
</body> 
</html> 
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Guarde el archivo y ábralo en el navegador. 
Pulse sobre el botón hide() y observe que en la 

parte inferior aparece el texto hide brevemen- 
te y luego se desvanece al mismo tiempo que el 
bloque superior en verde se oculta. 


3. Pulse sobre el botón show() y observe que, 
además de mostrar el texto en la parte inferior, 
el bloque verde vuelve a aparecer. 


Tm 


£>G00 [O fie///c/tj100.. se) Ao: £>G040 [ © fie///C/tj100... A E i 


» | |. Otros marcadores » | | Otros marcadores 














4. Pulse sobre el botón toggle() y vea como el bloque aparece y desaparece 
alternativamente, de forma que si se está mostrando se oculta y si está 
oculto se visualiza. 





€ > C fý O fie//C/g100. tr 34& : 


» | | | Otros marcadores 
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5. El botón reset vuelve a recargar la página y la deja en su estado inicial. 


6. A continuación, vamos a añadir una animación y, para ello, añadiremos dos 
botones más en una fila nueva detrás de los ya existentes con el siguiente 
código: 





. <ta><input type-"button" value-"roggle()" id-"b toggle" 


class-"cb" /»«/td» 
«tx» 
etr» 


«td»«input type-"button" value-"animate()" id-"b animate" 


class="ep*. /></ta> 


<td><input type-"button" value-"delay()" id-"b delay” 


plasss-"ab" ¿5</ta> 


etr 





También afiadimos el siguiente código justo después de $(document).re- 
ady(function()(: 


var vell = 4000; var vel2 = 100; var vdl = false; 
$("4b animate").click(function () { 
resaltar ("animate"); 
vdl = !vd1; 
$("£dl").animate((height: "toggle",width: “toggle”), vell); 
S$("£d2").animate((height: "toggle",width: “toggle”), vell); 
DE 
$(“#b_delay”).click(function () ( 
resaltar (“delay-slideToggle”); 
if (!vd1) ( 


$("4d1").delay(vel2).slideToggle(function ()( S("4a2").de- 
lay(vel2).slideToggle(); )); 


) else ( 


$(“4d2”) .delay (vel2) .slideToggle (function () ( $("4d1").de- 


lay (vel2) .slideToggle();)); 
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Guarde la página y compruebe su funcionamiento en el navegador. Pulse 
sobre el botón animate() para ver que el bloque superior se va haciendo 
pequeño progresivamente hasta desaparecer y, a continuación, vuelva a pul- 
sarlo para ver como aparece de nuevo lentamente. Por último, pulse sobre 
delay() para ver que desaparece verticalmente con un cierto retardo. 


c2 c0 [O tiez/rcirejico... to* i € > Q € |Ofile/c/g100. | A 


» | | Otros marcadores » | | Otros marcadores 








e » e 0 [ora ]$ + 


» | | | Otros marcadores 
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vo Bootstrap: Introducción 


Bootstrap es un framework que facilita el desarrollo web facilitando la adaptación 
de las pantallas de nuestra aplicación a los diferentes tamaños de dispositivos. Com- 
bina HTML, CSS y JavaScript y su curva de aprendizaje es muy asequible. Existe 
mucha información en Internet, aunque sugerimos visitar el siguiente link https:// 
v4-alpha.getbootstrap.com/, ya que nos permite realizar diversas acciones como, 
por ejemplo, descargar la librería para trabajar en local, consultar la documentación 
del framework, ver muchos ejemplos que podemos copiar y adaptar a nuestros desa- 


rrollos, etc. 


Al acceder a esta página, hallamos un menú desde el 
que podemos acceder a diversas opciones entre las que 
destacamos Documentation. Si accedemos a Docu- 
mentation, veremos una introducción explicando qué 
es Bootstrap y unas indicaciones sobre cómo podemos 
empezar a utilizarlo rápidamente, entre otras opciones. 
Al margen de esto, en la parte de la derecha dispone- 
mos de una caja de texto “Search”, que nos permitirá 
localizar fácilmente el recurso que buscamos según va- 
mos tecleando su nombre. Bajo dicha caja de texto, dis- 
ponemos de una serie de links organizados en forma de 
columnas que nos permitirá acceder a los temas de una 
forma organizada en función de lo que necesitemos. Sin 
lugar a dudas, todas las opciones que nos ofrece el menú 
de la página de Bootstrap son interesantes, pero noso- 
tros vamos a destacar las siguientes: 





Search 








butt 





| Button group 


Buttons 
Introduction 


Download 
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Getting started 
Introduction 
Download 
Contents 

Browsers & devices 
JavaScript 

Options 

Build tools 

Best practices 


Accessibility 


Layout 
Content 
Components 
Utilities 


About 


Migration 








Opción Comentario 


Layout Permite definir estilos globales y estructurar nuestras páginas. 
(Overview, Grid, Media object y Responsive utilities) 
Contents Uso de contenedores y diseño basado en anchos mínimos 
para que nuestra aplicación se ajuste según cambie el tamaño 
de la vista. 
(Reboot, Typography, Code, Images, Tables y Figures) 


Components | Ofrece un conjunto de componentes que podemos copiar y pegar 
en nuestro código para que, con unos pequeños ajustes, puedan 
utilizarse fácilmente. 

(Alerts, Badge, Breadcrumb, Buttons, Button group, Card, 
Carousel, Collapse, Dropdowns, Forms, Input group, Jum- 
botron, List group, Modal, Navs, Navbar, Pagination, Po- 


povers, Progress, Scrollspy y Tooltips) 


Utilities Conjunto de clases que pretenden facilitar tareas frecuentes como 
el uso de colores, alineaciones, posicionamiento, espaciados, bor- 
des, etc. 

(Borders, Clearfix, Close icon, Colors, Flexbox, Display 
property, Image replacement, Invisible content, Posi- 
tion, Responsive helpers, Screenreaders, Sizing, Spacing, 


Typography y Vertical align) 





A continuación, vamos a crear una pequeña aplicación sobre la que copiaremos el 
template que nos encontramos al acceder a Documentation, concretamente en el 
apartado Starter template. Si pulsamos sobre Copy, copiaremos todo el texto que 
se propone como template. 


Starter template 


Be sure to have your pages set up with the latest design and development standards. That means 
using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put 
it all together and your pages should look like this: 


€«IDOCTYPE html» 
«htal lang-"en"» 
<head> 
«1-- Required meta tags 
«meta chaesere"urf-8^» 


«meta mamme"yiewport" pantent-="uidthedev 


0 betrap CSS 


¿link rol-"stylashoot”" hrof="https 
</head> 
<body> 

<«ni>Hello, world!c/h1» 


<]-- jQuery First, then Tether, then Bootstrap 35. -- 
«script src-"https: // code. jquery . con/ jquery 
«script src-"https://cdnjs.cloudflare.com/ajax 
«script secs" nrtps://maxcdn.boorstrapcán.cos/bootstraáp/A.8.6-à 
ci body» 
</html> 
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A continuación, vamos a crear una aplicación en la Importante 
que mostraremos cómo empezar a usar Bootstrap rá- 
pidamente y de forma sencilla. 
1. En primer lugar, nos ubicaremos en Ej100_ 


angular y teclearemos ng new btIntro para 
crear nuestro nuevo proyecto. 


2. Seguidamente, renombraremos el proyecto 
escribiendo lo siguiente: 








C:NEj100 angular»rename btIntro 087 btIntro 


A continuación, nos ubicaremos en 087 btIntro y arrancaremos la aplica- 
ción para comprobar cómo funciona en nuestro navegador. Para ello, teclea- 
remos lo siguiente: 





100 angular»ced 087 btIntro 











100 angular S087 btIntro»ng serve 





/ e 
/[ I Binto x WA 
j V 


:XEj100 angular»rename btIntro 087 btIntro € > Q (10 localhostszoo Q 
:1E31068_angular>cd 687_btintro 


:XEj100 angularX887 btintro»ng serve 
* HG Live Development Server is running on http://localhost:;4200, ** 


ks! 
{0} polyfills.bundle.is, polyfills.bundle.map (polyfills) 234 kī (4) [initial] [rendered] app wor s. 
{1} main.bundle.js, main.bundle.map (main) 4.02 kB (3) [initial] [rendered] 
{2} styles.bundle.js, styles.bundle.map (styles) 9.71 kB (4) [initial] [rendered] 
(3) vendor.bundle.js, vendor.bundle.map (vendor) 2.03 MB [initial] [rendered] 
{4} inline.bundle.js, inline.bundle.map (inline) e bytes [entry] [rendered] 
pack: Compiled successfully. 





Ahora, abrimos nuestro proyecto y editamos el archivo src/app/app.com- 
ponent.html. En el mismo pegaremos el contenido de la plantilla que nos 
ofrece el apartado Starter template comentado antes. 


3. Insertaremos un div para encerrar nuestro “<h1>Hello, world!</h1>” y 
que quede de la siguiente manera: 


«div class-"container-fluid"» 


<hl>Hello, world!</h1> 


</div> 





La clase container-fluid permite que el contenedor ocupe todo el ancho 
del visor. Guardamos el archivo y acudimos al navegador a ver el aspecto de 
la página. 


374 El gran libro de Angular 


© tinte un 
€ 9 C Q 0 tocalhostazoo A | 


Dircs marcadores 





Hello, world! 





4. Seguidamente, vamos a Utilities->Color de la página de Bootstrap 
y copiamos la siguiente sentencia para pegarla a continuación de 
“<h1>Hello, world!</h1>”: 


<p class-"text-success"»Duis mollis, est non commodo luc- 


tus, nisi erat porttitor ligula.«/p» 





Modificamos el texto “Duis ...lígula” para que ponga un texto más perso- 
nalizado como por ejemplo “Mi texto de pruebas", guardamos el archivo 
y vemos el resultado en el navegador. La clase text-success es la encargada 
de la apariencia del texto. 


fürs Aa 
€.» Qty | D tocainost:4200 & t) + 
| Otros marcadores 


Hello, world! 


Mi texto de pruebas 














5. A continuación, creamos la carpeta images bajo src (src/images) y 
copiamos una imagen cualquiera que podemos llamar img1.jpg. 


v E] 087_btintro 


ll environments 


ll images 
la) imglJjpg 
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6. Vamos a la página de Bootstrap y en Utilities->Borders localizamos 
Border-radius para copiar lo siguiente y pegarlo a continuación del párrafo 
insertado anteriormente: 





«amg sro"... alt=" zs" class-"rounded-circle"- 





Luego, adaptamos lo copiado para que quede de la siguiente manera: 


«img src-"images/imgl.jpg" alt-"Mi imagen" class-"roun- 


ded-circle img-fluid w-50”> 





La clase rounded-circle produce un redondeo sobre la imagen, img-fluid 
crea una escala de imagen acorde a cada dispositivo y w-50 indica que la 
imagen ha de ocupar el 50% del tamaño de la ventana. Pruebe de cambiar 
el tamafio de la ventana y observe que la imagen se redimensiona para ocu- 
par el 50% del ancho de la misma. 





A 
/ € Btintro x AN 


€ > C f O localhosts200 Q w| A 








Hello, world! 


Mi texto de pruebas 
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Uso Bootstrap: Layout. 
El sistema Grid 


En el apartado Layout de la documentación Boots- Importante 


trap, encontrará todo lo relacionado con las herra- 
mientas de de diseño que nos ofrece el framework. En- 
tre estas, cabe destacar el Sistema “Grid” de Bootstrap. 


El sistema de “Grid” de Bootstrap nos permitirá di- 
señar y alinear contenidos, mediante contenedores, fi- 
las y columnas. Vamos a ver todo su potencial a través 
de varios ejercicios. 


1. Nos  ubicaremos en  ej100 angular y 
crearemos el proyecto tecleando ng new 
btLayout. Luego, lo renombraremos para 
que haga referencia a nuestro nümero de 
ejercicio ejecutando rename btLayout 088. 
btLayout y, finalmente, pondremos en marcha 
la aplicación ejecutando ng serve desde dentro la carpeta 088 btLayout. A 
continuación abriremos el proyecto con Atom. 





2. Seguidamente añadiremos los links de Bootstrap  (https://v4-alpha. 
getbootstrap.com) en index.html para poder hacer uso de sus hojas de estilo. 
Consulte “087 Bootstrap ...” para más información. 


3. Ahora editaremos src/app/app.component.html y añadiremos el 
siguiente código: 


<div class="container-fluid”> 


<h1>088 Bootstrap Layout</h1> 


</div> 
<div class-"container"» 
«p»Contenido...«/p» 


«/div» 





Con las clases de Bootstrap .container-fluid y .container estamos defi- 
niendo un contenedor de tamaño variable y otro de tamaño fijo. Observe 
el resultado en el navegador. Si modifica el tamafio del navegador podrá ob- 
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servar cómo el primer contenedor se adapta a ello mientras que el segundo 
mantiene el tamaño fijo. 


O to 


€ C | © toalhostsso 


088 Bootstrap Layout 


Cortenidc. 


ec Iccsieost 


088 Bootstrap Layout 





4. Dentro los contenedores, definiremos nuestras filas y columnas mediante 
las clases .row y .col-sm. El sistema “Grid” de Bootstrap nos permite definir 
un máximo de 12 columnas de tamaño 1. A partir de aquí, podemos 
realizar las combinaciones que queramos: una fila con una columna de 
tamaño 2, otra de tamaño 4 y otra de tamaño 6, una fila con una columna 
de tamaño 9 y otra de tamaño 3, etc. 

Vamos a crear una par de filas con distintas configuraciones de columnas. 
Para ello, sustituye el segundo contenedor que habíamos creado en src/ 
app/app.component.html, por el siguiente: 


«div class-"container"» 
«div class-"row"» 
«div class-"col-sm-2"»col-sm-2«/div» 


«div class-"col-sm-4"»col-sm-4«/div» 





«div class-"col-sm-6"»col-sm-6«/div» 
«/div» 
«div class-"row"» 
«div class-"col-sm-9"»col-sm-9«/div» 
«div class-"col-sm-3"»col-sm-3«/div» 


</div> 





«gr 


5. Para facilitar la comprensión de este ejercicio, crearemos un borde para cada 
una de las “celdas” creadas a partir de la definición de filas y columnas. Para 
ello, vamos a afiadir la siguiente clase en nuestra hoja de estilo src/app/ 
app.component.css: 


.celda ( 


border: fcdcdcd medium solid; 





Finalmente aplicaremos la clase a cada una de las columnas que hemos im- 
plementado antes en src/app/app.component.html: 
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<div class-"container"» 


«div class="row"> 


«div class-"col-sm-2 celda"»col-sm-2«/div» 





6. Observe en el navegador el resultado de este código. 


7. Con Bootrsap tenemos 4 
" O «v 
tipos de columnas. Cada ]. .. 


Q facalhosr2( 


una de ellas se utiliza ] gg Bootstrap Layout 
para mostrar en distintos SS T LER - 


dispositivos con pantallas 
de resolución distinta: 
col-xs (para pantallas 
de resolución menor a 
768px), col-sm (para pantallas de resolución mayor o igual a 768px), col- 
md (para pantallas de resolución mayor o igual a 992px) y col-lg (para 
pantallas de resolución mayor o igual a 1200px). Estos tipos de columna se 
pueden usar a la vez, cosa que nos permitirá hacer diseños para todo tipo de 
pantallas al mismo tiempo. 


I-sm-4 m6 


5m 


armé 
ol-<m-8 





Veamos un ejemplo. Añada la siguiente nueva fila en src/app/app.com- 
ponent.html: 


<div class-"container"» 


«div class="row”> 


<div class="col-sm-4 col-md-6 celda"»col-sm-3 col-md-6</di 





<div class="col-sm-8 col-md-6 celda"»col-sm-9 col-md-6«/di 
«/div» 


«/div» 





8. Observe en el navegador el resultado. Fíjese cómo, en la nueva fila, se aplica 
una u otra configuración según el tamaño del navegador. 


pee 
€ C oco eli * 


088 Bootstrap Layout 088 Bootstrap Layout 


colera- 


acahosi 


n-4 


-sm-9 £ol3m-3 col-sr1-3 calmd-6 ol-im-9 rcl-md-6 





9. De forma parecida, también tenemos otros tipos de clases que se aplican 
segün el tamafio de pantalla. Estas son las de ocultar o mostrar columnas: 
.hidden-xs, .hidden-sm, etc., visible-xs, .visible-xm, etc. 
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10. Usando la clase  .offset-xx- ex. 
tamaño, podremos desplazar [n 
columnas. Cuando desplazamos 
una columna, lo que hacemos T - 
realmente es crear una columna T 
vacía a la izquierda de la columna 
desplazada. Veamos un ejemplo. 
Añada la siguiente nueva fila en src/app/app.component.html y observe 
el resultado en el navegador: 


088 Bootstrap Layout 


ol-sm 





<div class-"row"» 
<div class-"col-sm-2 offset-sm-4 celda"»col-sm-2 
offset-sm-4</div> 
<div class="col-sm-2 offset-sm-4 celda"»col-sm-2 
offset-sm-4</div> 


</div> 





11. Para terminar, vamos a ver cómo 
podemos anidar columnas. |... 
Para ello, simplemente crearemos | ogg Bootstrap Layout 
nuevas filas (rows) dentro de Uns li pen 
columnas. Añada la siguiente TT 
nueva fila en src/app/app. 
component.html y observe el 
resultado en el navegador: 


O x 





«div class-"row"» 
«div class-"col-sm-3 celda"»col-sm-3«/div» 
«div class-"col-sm-9 celda"» 


«div class-"row"» 





«div class-"col-sm-4 celda"»col-sm-4«/div» 








«div class-"col-sm-4 celda"»col-sm-4«/div» 








«div class-"col-sm-4 celda"»col-sm-4«/div» 
«/div» 


«/div» 


«/div» 
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089 


Bootstrap: Tables 


Dentro del apartado Content, podemos encontrar un Importante 


tema dedicado a las tablas el cual nos permitirá añadir 
un aspecto y funcionalidad a las mismas simplemente 
añadiendo alguna de las clases que se ofrecen. Algunas 
clases afectan a la tabla, otras a los encabezados, otras 
a las filas, etc. 


A continuación, fabricaremos una aplicación para 





probar algunos ejemplos y ver su resultado en el 


navegador. 


1. En primer lugar, nos ubicaremos en Ej100_angular y crearemos el proyecto 
btTables tecleando ng new btTables. 


2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100_angular, escribiremos lo siguiente: 


C:N 





Ej100 angular»rename btTables 089 btTables 


Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso usa- 
mos Atom) y abrimos el archivo app.component.ts para modificar el 
título (title) y poner, por ejemplo, ^089 Bootstrap Tables". 


3. Después accedemos a la página de Bootstrap y copiamos el contenido que 
se halla en Documentation->Quick start, que empieza por: 


Quick start 
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free hy the folks at MaxCDN. 
Using a package manager or need ta download the source files? Head to the downloads page 


Copy-paste the stylesheet «link into your «haad» before all other stylesheets to load our CSS. 





<link rel-"stylesheet" href="https://maxcdn.bootstrapcdn. 


com/bootstrap/4.0.0- 


El gran libro de Angular 381 





Dicho contenido lo pegamos en la primera línea del archivo app.compo- 
nent.html dejando que el resto del archivo contenga lo siguiente: 





<div> 


<h1> 


((titlej) 
</h1> 





</div> 


Luego, en la misma página de Bootstrap, veremos que tras la sentencia 
anterior, se hallan 3 líneas que hacen referencia a jquery, tether y boots- 
trap, que empiezan por: 


Add our JavaScript plugins, ¡Query, and Tether near the end of your pages, right before the closing </body> tag. Be 
sure to place jQuery and Tether first, as our code depends on them. While we use jQuery's slim build in pur docs, the 
full version is also supported 


" : Copy 
€script src-^https://code.jquery.com/jauery-3.1.1.51im.min.js" integrity-"sha384-A7F237w«d/sdmMqo/! 


«script src-^https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity-"sha3: 


«script src-^htrps: / /máxcán.bootstrapcdn,com/bootstrap/4.80,8-alpha.6/]s/bootstrap.min.]s" integrit 


«script src-"https://code.jquery.com/jquery... 





Pulsamos el botón Copy y las pegamos al 
final de nuestro archivo app.component. 
html. 


€ > C Q [O localhost4200 


089 Bootstrap Tables 
4. A continuación, nos ubicaremos en 089_ 


btTables y arrancaremos la aplicación con 
ng serve para comprobar cómo funciona 
en nuestro navegador. Para ello, teclearemos lo siguiente: 








lar>cd 089 btTables 











larN088 btTables»ng serve 








A partir de aquí, en la página de Bootstrap, 
situados en Documentation, teclearemos ¡[tables ] 
en la caja de texto Search, la palabra tables y — 
seleccionaremos de la lista resultante precisa- ewig suae 
mente Tables. 





Introduction 
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5. Además de revisar el contenido de esta página, G:appcomponenthknil 


podemos copiar el primer ejemplo pulsando <link rel="stylesheet" hre 
sobre el botón Copy que hay debajo del primer 

ejemplo, y pegarlo en app.component.html, eo 

justo debajo de nuestro «/h1» que cierra el ((title]) 

título (title). Lo primero que destacamos es ef - - 

que al tag table, le asignamos la clase "table". a ESTE 


<tr> 
«th»s«/th» 
«th»First Name«/th» 
«th»Last Name«/th» 
<th>Username</th> 


6. Si consultamos el navegador donde está 
corriendo la aplicación, veremos el resultado 
de esta acción. 





7. A continuación, veremos el siguiente ejemplo 
propuesto por Bootstrap que simplemente 
muestra en vídeo inverso el contenido de la tabla añadiendo la clase table- 
inverse a la clase ya existente y dejando el tag de table con el siguiente 
contenido: 


€ > Q Q |O kahon 


089 Bootstrap Tables 
# First Name Last Name Username 
1 Mark Otto @mdo 
2 Jacob Thornton @fat 


3 Larry the Bird Gtwitter 





«table class-"table table-inverse"» 


8. Observe el resultado en el navegador. 


€>00 | QD lecalhort4200 


089 Bootstrap Tables 


Last Name 
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9. Sustituyamos a continuación la clase table-inverse por table-bordered 
para que quede de la siguiente manera: 


<table class-"table table-bordered”> 


Observe el resultado en el navegador. 


€ > Q NQ [O cahot ari. ERI | 


089 Bootstrap Tables 


First Name 


Otto 


Thornton 


the Bird 





10. Añada la clase table-hover para que la fila cambie de color al pasar el 
puntero del ratón sobre la misma y deje el siguiente contenido: 


«table class-"table table-bordered table-hover”> 


Observe el resultado en el navegador. 





cc 0 [O tocainosta200 ar. <<» E 
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First Name 








Mark Otto 


Jacob Thornton 


the Bird 





11. Por último, pruebe las “Contextual clases” añadiendo a la primera fila del 
tbody la clase table-success, para que quede de la siguiente manera: 


<tbody> 


«tr class-"table-sucoess"- 
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Compruebe el resultado en el navegador. 


089 Bootstrap Tables 


Last Name 





12. Pruebe con el resto de clases ofrecidas por la página para experimentar sobre 
las diferentes posibilidades que ofrece este tema. 
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Bootstrap: Alerts 


En este ejercicio, presentaremos las alertas que podemos utilizar con Bootstrap de 
forma sencilla y practicaremos con algunas de las mismas. Al igual que comentamos 
en ejercicios anteriores y que se repetirá en los ejercicios relativos a Bootstrap, nos 
hemos de conectar a la página https://v4-alpha.getbootstrap.com/ y seleccionar la op- 
ción de menú Documentation. En dicha página, teclearemos en la caja de texto 
Search, el término Alerts, para seleccionar la opción propuesta y trasladarnos a la 
página en la que se explica su cometido y se ofrecen diferentes recursos para su uso. 


Vamos a crear un proyecto donde poder probar este tema. Para ello, haremos lo 
siguiente: 


E 


En primer lugar, nos ubicaremos en Ej100_ Toe 
angular y crearemos el proyecto btAlerts pone 


tecleando ng new btAlerts. 


Seguidamente, renombraremos el proyecto 
para que haga referencia a nuestro número 
de ejercicio. Para ello, estando ubicados en el 
directorio Ej100_angular, escribiremos lo 
siguiente: 





C:NEj100 angular»rename btAlerts 090 btAlerts 





Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso usa- 
mos Atom) y abrimos el archivo app.component.ts para modificar el tí- 
tulo (title) y poner, por ejemplo, “090 Bootstrap Alerts". 


De la misma forma que explicamos en ejercicios anteriores, modificaremos 
nuestro archivo app.component.html para insertar al principio la línea 
que hace referencia a la hoja de estilos de Bootstrap: 


«link rel-"stylesheet" href="https://maxcdn.bootstrapcdn. 





com/bootstrap/4.0.0- 





Tras esta línea de referencia, comprobaremos que el resto de la página 
contiene lo siguiente: 
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<div> 


<h1> 
((title)) 
«/h1» 


«/div» 





Y al final del mismo archivo, comprobaremos las referencias a jquery, te- 
ther y bootstrap: 





«script src-"https://code.jquery.com/jquery 


Arrancamos la aplicación con ng serve y observamos cómo se ve nuestra 
aplicación en el navegador. 


Q eS * 





c C O QG'eanct 


090 Bootstrap Alerts 





5. A continuación, acudimos a la página de Bootstrap y copiamos el primer 
ejemplo que contiene lo siguiente: 


«div class-"alert alert-success" role-"alert"» 


<strong>Well done!«/strong» You successfully read 





this important alert message. 


e«fdiy 





Lo pegamos debajo del </h1> que cierra nuestro título, guardamos el archi- 
vo y vemos el resultado en el navegador. 


6. Seguidamente, probamos el ejemplo 
que muestra una cabecera y un 
párrafo. En la página de Bootstrap, 
en Aditional content veremos lo 
siguiente: 





Well done! You successtully read this important alert message 
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<div class-"alert alert-success" role-"alert"» 


<h4 class-"alert-heading"»Well done!</h4> 





<p>Aww yeah, you successfully read this important alert 
message. This example text is going to run a bit longer 
so that you 


Can see how spacing within an alert works with this kind 


of content.</p> 


<p class-"mb-0"»Whenever you need to, be sure to use mar- 


gin utilities to keep things nice and tidy.«/p» 


</div> 





Lo copiamos (Copy) y lo pegamos a : 
continuación de la alerta anterior en 0 [oss nn...» 
nuestra página HTML y modificamos 

alert-success por alert-info y vemos [090 Bootstrap Alerts 
cómo queda en el navegador. Well donet You successfully read this importar alt message 


Dos mcdtrer 


7. Si seguimos avanzando en la página, E EE 

encontramos el apartado Dismissing example text is going ten a bit longer so that you can see hew 
spacing within an alert wods with this tind o! content 
donde veremos que la alerta puede i 
. Whenever you need to, be sure to use mangin utilities to teep 

cerrarse. Podemos copiar (Copy) el things nice and tidy 
ejemplo y pegarlo en nuestra página 
HTML a continuación de la alerta anterior: 








«div class-"alert alert-warning alert-dismissible fade show" 





role="alert”> 


<button type-"button" class-"close" data-dismiss-"alert" 


aria-label-"Close"» 
<span aria-hidden-"true"»&times;«/span» 


«/button» 


<strong>Holy guacamole!«/strong» You should check in on 


some of those fields below. 





ec inihi 


Guardamos el archivo y vemos cómo queda en el navegador. Si pulsa sobre 
la cruz que aparece en la esquina superior derecha verá cómo se cierra la 
alerta. 


8. Ahora, para que se vea mejor y quede mejor organizado, encerraremos 
nuestro título y nuestras alertas en un DIV que use la clase "container": 
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Well done! You successfully read this important alert message 


Well done! 


Aww yeah, you successfully read this important alert message. This 
example text is going to run a bit longer «o that you can see how 
spacing within an alert works with this kind of conteret 


Whenever you need to, be sure to use margin utilities to keep 
things mece and tidy. 


Holy guacamole! You should check in on some of those 
fields below 


«div class-"container"» 


«hl» 


«/div» 





Veamos cómo se muestra en el navegador. 


C OQ QGioohetos Es MG» 


ni o Omn mocsdsier 
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Well done! You successfully read this important alert 
message. 


Well done! 


Aww yeah, you successfully «ead this important alet message 
Thus example tex is gomg to run a bit longer so that you can 
see how spacing within an alert works with this kind of 
conteat 


Wherever vou need to, be sure to use margin utilises to keep 
things nice and tdy 


Holy guacamole! You shouid check in on some of 
those fields below 





9. Por ültimo, podemos afiadir una alerta con un link localizando en la página 
el apartado Link color y copiando el primer ejemplo que posee el siguiente 
contenido: 
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<div class-"alert alert-success” role-"alert"» 





<strong>Well done!</strong> You successfully read <a 


href-"4" class-"alert-link"»this important alert mes- 


sage</a>. 


dise 





Lo pegamos detrás de la áltima alerta y modificamos el contenido para que 
contenga lo siguiente: 
«div class-"alert alert-success" role="alert”> 


<strong>Hola!</strong> Prueba de link «a href="http:// 
www.google.com" target="_blank”  class="alert-link">a 


Google</a>. 


</div> 





Guardamos el archivo y acudimos al navegador para ver la nueva alerta (06) 
y observaremos que al pulsar sobre el link, se crea una nueva pestaña en la 
que se muestra la página del buscador de Google. 


Q manu 


é C (0 O tostost ag e 


090 Bootstrap Alerts 


Well done! Yos successtully read this imports? alert 
message. 


Well done! 

Sw yesh, you successfully read this important alert message 
Thik example tma is going To nun a bit longer se that you <Ar 
see how spacing within an alert works with this kind ol 
2npent 

Whenever you reed ia be sure to use megin villities to lose. 


Pings rice and dy 


PRA Sigue won be patior caledaria. renibados y 
$ 


Holy guacamole! Vos shovid check in es sorne of 
those fizlds beow moade pr Gogh e 


Hola! Pusba de link a Google 
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Bootstrap: Buttons 
y ButtonGroups 





En este capítulo, abordaremos los detalles relacionados 

con los Buttons y con los ButtonGroups que, aunque 
tengan un nombre parecido, realmente son controles 
diferentes. 


Buttons 


Los estilos aportados para los botones nos permiten per- 
sonalizar el aspecto de diferentes elementos en nuestros 
formularios y diálogos. Además de cambiar la forma de 
visualizar los botones en si mismos, podemos cambiar 
el aspecto de elementos como, por ejemplo, los de tipo 
<a>, <input>, Checkbox y Radio buttons. 





Podemos encontrar información relativa a los buttons en la página de Bootstrap 


https://v4-alpha.getbootstrap.com/, tecleando la palabra Buttons en la caja de tex- 
to Search, existente en Documentation. 


Como siempre, en esta página encontraremos toda la información asociada a este 
tipo de elementos además de ejemplos y plantillas que nos agilizaran los desarrollos. 


Veremos que, por defecto, vienen una serie de estilos predefinidos que son: Pri- 
mary, Secondary, Success, Info, Warning, Danger y Link. 


Si seguimos curioseando la página, veremos aspectos como: 


e Outline buttons: elimina las imágenes y colores de fondo que puedan 
traer los botones. 
Sizes: Para crear botones con diferentes tamaños (large, small, block). 
State: Para crear botones que estén habilitados o deshabilitados o que 
funcionen como un interruptor ON/OFF (Active, disabled, toggle). 

e Etc. 


Ejercicio para Buttons 


En el siguiente ejercicio, crearemos una aplicación en la que simplemente mostra- 
remos unos cuantos botones con diferentes estilos a los que no daremos funciona- 
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lidad, excepto al que lleva asociado un link, que lo usaremos para navegar a otra 
página. 


1. En primer lugar, nos ubicaremos en Ej100_angular y crearemos el proyecto 
btButtonsB tecleando ng new btButtonsB. 


2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100 angular, escribiremos lo siguiente: 





C:NEj100 angular»rename btButtonsB 091 btButtonsB 





Ahora, abrimos nuestro proyecto con nuestro editor (en nuestro caso usa- 
mos Atom) y abrimos el archivo app.component.ts para modificar el tí- 
tulo (title) y poner por ejemplo ^091 Bootstrap ButtonsB". 


3. De la misma forma que explicamos en ejercicios anteriores, modificaremos 
nuestro archivo app.component.html para insertar al principio la línea 
que hace referencia a la hoja de estilos de Bootstrap: 


<link rel="stylesheet” href-"https://maxcdn.bootstrapcdn. 








com/bootstrap/4.0.0- 





El resto del archivo contendrá lo siguiente: 


<a> 
(([title)) 


«hl» 





Y al final del mismo archivo, las referencias a jquery, tether y bootstrap: 





«script src-"https://code.jquery.com/jquery 


Afiadiremos un elemento DIV con la clase “container” alrededor de nues- 
tro <h1> que muestra el títle para que quede de la siguiente manera: 
«div class-"container"» 
«hi» 
{{title}} 


</h1> 





</div> 
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Arrancamos nuestra aplicación (con ng serve desde C:1Ej100_angu- 
lar>091_btButtonsB) y observamos cómo se ve nuestra aplicación en el 
navegador. 





€» 0 | D tocalhost:4200 agam e: 
» L & Otros marcadores 





091 Bootstrap ButtonsB 





4. Seguidamente, desde la página de Bootstrap dedicada a los botones, 
copiaremos el primer ejemplo correspondiente al estilo ‘Primary’, que 
posee el siguiente contenido: 


<button type="button” class="btn btn-primary”>Primary</ 
button> 





Lo pegamos a continuación de </h1> asociado a title. Para organizar me- 
jor los bloques, encerraremos este botón en un DIV al que le añadimos la 
clase “row " para indicar que se trata de una fila y m-2 para que añada un 
margen alrededor del botón (por favor, consulte el apartado Utilities->S- 
pacing para más detalles). Queda de la siguiente manera: 


<div class-"row m-2"» 


<button type="button” class-"btn btn-success"»Primary«/ 
button» 


</div> 





Guardamos el archivo y lo visualizamos en el navegador. 





^ Œ (0 |O lccahost4200 


091 Bootstrap ButtonsB 





5. Luego, localizamos en la página de Bootstrap el apartado Button tags y 
copiamos el ejemplo correspondiente al tag <a> que usa las clases “btn ...” 
y que concretamente contiene lo siguiente: 
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<a class="btn btn-primary” href-"4" role-"button"»Link«/a» | 


Volvemos a nuestra página HTML y añadimos otro bloque DIV idéntico 
al del ejemplo anterior para colocar lo que hemos copiado, pero modifica- 
remos la propiedad href para que apunte a "http://www.google.com" 
quedando de la siguiente manera: 


«div class-"row m-2"» 





«a class="btn btn-primary" href="http://ww.google.com” 


role-"button"»Link«/a» 


</div> 





Guarde el archivo y observe cómo se ve en el navegador. Haga click sobre el 
botón Link y compruebe que navega hasta la página de Google. 


Q stone G Google 
€ > Q Q |O icmost2o0 ara Beso: € > G O |à Eseguo | Hips wwgcogiscom rie pes: 


091 Bootstrap ButtonsB 
Google 


Link 








meradores. Otan marcadores 








6. Seguidamente, probaremos un ejemplo del apartado Outline buttons. 
Localícelo en la página y copie el ejemplo que posee el siguiente contenido: 


«button type="button”  class-"btn btn-outline-primary”>Pri- 
mary</button> 


Inserte un DIV como los comentados anteriormente y dentro del mis- 
mo, pegue el contenido copiado. Guarde y compruebe el resultado en el 
navegador. 


7. Por último, haremos una prueba con 
un botón grande y otro pequeño. fes calore 
Para ello, localice el apartado Sizes 
en la página de Bootstrap y copie į 091 Bootstrap ButtonsB 


los primeros ejemplos de Large 
button y Small button. Luego, 


cree un DIV para cada uno de ellos | 
en nuestro archivo HTML de forma | Primary | 
que al final contenga lo siguiente: 
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«div class="row m-2"» 


«button type="button” class="btn btn-primary btn-1g”>Lar- 


ge button</button> 


e qwe 
«div class-"row m-2"» 


<button type="button” class-"btn btn-primary btn-sm”>S- 
mall button</button> 


«fdv 





Guarde el archivo y compruebe cómo queda en el navegador. 


€ 3 QC 0 |O iocanosta200 & *| Be: 


E! Agicaciores G Googe M] mewo [El xampe 123 » Cros esavcadores 


091 Bootstrap ButtonsB 


Primary 


Primary | 


Large button 


Small button 








8. Le animamos a que pruebe el resto de ejemplos de la página para comprobar 
el resultado ya que, experimentar, es una muy buena forma de aprender. 


ButtonGroup 

Los Button group son elementos que permiten la importante 
creación de grupos de botones en una sola línea (o va- 
rias) y que pueden modificar el aspecto también de 
checkbox y radio-buttons. Podemos encontrar la 
información relativa a los button group en la pági- 
na de Bootstrap https://v4-alpha.getbootstrap.com/, 
tecleando en la caja de texto Search existente en Do- 
cumentation, el texto button group. Como de cos- 
tumbre, en la página hallaremos ejemplos, plantillas y, 
además, una explicación sobre posibles aspectos a tener en cuenta como, por ejemplo: 





e Buttons toolbar: permite combinar grupos de botones en una barra de 
herramientas de botones 

e Sizing: permite aplicar un tamaño estándar (btn-group-lg, btn-group- 
sm) a un grupo de botones en lugar de ir uno a uno. 
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Nesting: es posible incluir grupos de botones anidados. 
Vertical variation: permite mostrar los botones de un grupo 
verticalmente. 


En el siguiente ejercicio veremos algunas de las funcionalidades expuestas en la pá- 
gina para que el lector tenga una pequeña experiencia con el tema. En primer lugar, 
crearemos un sencillo ejemplo de 3 radio buttons que devuelven 3 valores dife- 
rentes y que no usan de momento, ninguna clase especial de los button group. 
Posteriormente copiaremos un bloque de código de la página de Bootstrap y la 
adaptaremos para hacer la misma acción que la comentada en el ejemplo clásico. 


L 


Nos ubicamos en Ej100 angular y creamos el proyecto btBtGroupBG 
tecleando ng new btBtGroupBG. 


Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro nümero de ejercicio. Para ello, estando ubicados en el directorio 
Ej100 angular, escribiremos lo siguiente: 








:NEj100 angular»rename btBtGroupBG 091 btBtGroup 














Abrimos nuestro proyecto (por ejemplo con Atom?) y abrimos el archivo 
app.component.ts para modificar el título (title) y poner por ejemplo 
^091 Bootstrap Button Group". 


Igual que en ejercicios anteriores, modificaremos el archivo app. 
component.html para insertar al principio la línea que hace referencia a la 
hoja de estilos de Bootstrap: 


«link rel-"stylesheet" href-"https://maxcdn.bootstrapcdn.com/ 














bootstrap/4:040- 25 
El resto del archivo contendrá lo siguiente: 


<h1> 


{{title}} 
</h1> 





Y al final del mismo archivo, las referencias a jquery, tether y bootstrap: 


<script src-"https://code.jquery.com/jquery ... 


Afiadiremos un elemento DIV con la clase “container” alrededor de nues- 
tro títle para que quede así: 


«div class-"container"» 


<h1>((title))</h1> 


</div> 
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Arrancamos la aplicación (con ng serve desde C:1Ej100_angular>091_ 
btBtGroupBG) y observamos cómo se ve nuestra aplicación en el 
navegador. 


O dirt 
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4. A continuación, en nuestro archivo app.component.html añadiremos 
después de </h1> lo siguiente: 


<div class-"container"» 


" "n 


<label><input type-"radio" name="grupol” value- 


(click)-"onClick(S$event)"»uno«/label»«br» 


























<label><input type-"radio" name-"grupol" value-"2" 


(click) ="“onClick (Sevent)“>dos</label><br> 





























<label><input type-"radio" name-"grupol" value-"3" 


(click)-"onClick(S$event)"»tres«/label» 








</div> 


Opción seleccionada: {{ res }} 





5. Hemos incluido 3 radio buttons con un valor para cada uno y con 
una llamada al método onClick cuando hacemos un click. También 
visualizamos la variable res usando la interpolación ({{}}). 


6. Ahora, en app.component.ts modificamos la clase AppComponent para 
que quede con lo siguiente: 


export class AppComponent { 





title = '091 Bootstrap Button Group'; 


res: string; 


onClick (event) { this.res = event.target.value; ) 





Al hacer un click sobre cualquier radio, se llamar al método onClick el cual, 
obtendrá el valor de la propiedad value y lo asignará a la variable res para 
que se muestre como la opción seleccionada. 
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7. Guardamos el archivo y vemos cómo 
funciona en el navegador haciendo 
click sobre los radio buttons y 
observando cómo cambia el valor de la 
opción seleccionada. 


Opción seleccionada: 2 





8. Ahora, en la página dedicada a los 
Button group que indicamos al 


principio, localizamos el ejemplo básico y copiamos (Copy) su contenido 


para pegarlo antes de “Opción seleccionada”: 





«div class-"btn-group" role-"group" aria-label="Basic 
example"» 
«button type=” pui class-"btn btn-secondary”>Left</ 


button> 





«button type-"bu! class-"btn btn-secondary"»Midd- 
le«/button» 








«button type-"bui lass-"btn btn-secondary”>Right</ 
button» 


«day 





Una vez copiado lo modificamos para adaptarlo al primer ejemplo y que 


quede de la siguiente manera: 


«div class-"container"» 





<div class-"btn-group" role-"group" aria-label="Basic 


example"» 


«button type="button” class="btn btn-primary btn- 
group” name-"grupo2" value-"1" (click)=”onClick($even- 


t) “>Uno</button> 


«button type-"button" class-"btn btn-primary btn- 


group" name-"grupo2" value-"2" (click)-"onClick(S$even- 


t)"»Dos«/button» 


«button type="button” class="btn btn-primary btn- 
group" name-"grupo2" value-"3" (click)=”onClick($even- 


t"»Tres«/button» 
sex 


</div> 
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Guardamos el archivo y probamos su funcionamiento en el navegador. 





€ 3 C |O manono Quíla Ml « » : 
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091 Bootstrap Button Group 


Guno 





Gdos 
Gtres 


Opción seleccionada: 2 





9. Seguidamente, copiamos este mismo bloque y lo pegamos a continuación 
del </div> que lo cierra. Añadamos también un <br> para separar los 
bloques DIV y modifiquemos la clase btn-group por btn-group-vertical 
para mostrar los botones verticalmente: 


€ Og 
<DE> 
<div class-"container"» 


<div class-"btn-group-vertical" role-"group" aria-la- 








bel-"Basic example" 


«button type-"button" class-"btn btn-primary btn- 


group" name-"grupo3" value="1" .. 





Guarde el archivo pruebe su funcionamiento en el navegador pulsando so- 
bre los botones. 





€ 3 C Ú |O ahost Qu. Uco: 
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Guno 





dos 


Opción seleccionada: 3 
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10. Para acabar, probaremos cómo cambiar el tamaño de los botones. 
Añadiremos la clase btn-group-sm al primer grupo de botones que hemos 
copiado para que la clase del div quede con lo siguiente: 


«div class-"btn-group btn-group-sm” 


Los botones se verán pequeños (sm->small). Guarde archivo y compruébe- 
lo en el navegador. 





CAS 


E 3 0 0 Dr anamen: 
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091 Bootstrap Button Group 


Guno 
Odos 


Utres 


Opción seleccionada; 1 





11. Ahora, mostremos en tamaño grande (lg->large) los botones que 
mostramos verticalmente y, para ello, añadiremos la clase btn-group-lg 
junto a la clase btn-group-vertical quedando así: 


«div class-"btn-group-vertical btn-group-1g” 


Guarde el archivo y compruebe cómo se visualiza en el navegador. 





€ 9 C O [O respon &* 5 Heo»: 
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091 Bootstrap Button Group 


Otres 


Opción seleccionada: 1 
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Jo Bootstrap: Cards 


Las Cards son un tipo de contenedor que ofrece multitud de opciones para encabe- 
zados, pies de página, colores de fondo, etc. Una de las ventajas es que son flexibles 
y extensibles. Además, se construyen con muy poca cantidad de código y están fa- 
bricadas con flexbox (sistema de elementos flexibles que facilita el posicionamien- 
to de dichos elementos cuando cambia el tamaño de la página). 


En esta página nos encontramos diversos temas que resumimos a continuación: 


e Content types: permite incluir una gran variedad de elementos en su 
interior. 

e Blocks: facilita una sección bien espaciada 
dentro de una tarjeta. 

e Titles, text y links: dentro de una tarjeta 
podemos encontramos con diferentes partes 
(títulos, subtítulos, textos, links, etc.) que poseen 
su correspondiente clase (card-title, card- 
subtitle, card-text, card-link, etc.) para 
facilitar su tratamiento. 

e Images/overlays: podemos añadir una imagen 
en la parte superior o inferior de la tarjeta. 
Podemos usar una imagen como fondo y poner 
el texto encima. 

e List groups: crea lista de contenido en una 
tarjeta. 

e Kitchen sink: permite combinar diferentes tipos de contenido sobre un 
ancho fijo. 

Header and footer: permite afiadir encabezados y pies. 

Sizing: podemos usar tags de grid para disponer las tarjetas en filas o 
columnas segün necesitemos. Recordemos que podemos distribuir nuestros 
elementos en 12 columnas que podemos agrupar como nos interese mediante 
expresiones col-X, siendo X el námero de columnas que pretendemos ocupar 
con el elemento. 

e Using utilities: podemos definir que usen ancho variables como, por 
ejemplo, w-50 (ocupa el 50% del ancho de la página). 

e Text alignment: es posible alinear el texto fácilmente (izquierda, 
centro, derecha). 

e Navigation: añade navegación al encabezado de la tarjeta. 
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Importante 





Card styles: diferentes tipos de fondos, bordes y colores (Background 
variants, Outline cards). 

Card layout: permite visualizar las tarjetas en series (Card groups, Card 
decks, o unidas entre sí, Card columns). 


A continuación, vamos a realizar un ejercicio en el que veremos algunos ejemplos 
de los descritos en la página. 


L 


En primer lugar, nos ubicamos en Ej100 angular y creamos el proyecto 
btCards tecleando ng new btCards. 


Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, ubicados en el directorio Ej100 
angular, escribiremos lo siguiente: 








C:NEj100 angular»rename btCards 092 btCards 


Abrimos nuestro proyecto (por ejemplo, con Atom) y abrimos el archivo 
app.component.ts para modificar el título (title) y poner por ejemplo 
“092 Bootstrap Cards”. 


Igual que en ejercicios anteriores, modificaremos el archivo app.component. 
html para insertar al principio y al final del mismo las referencias a la hoja 
de estilos de Bootstrap (al principio) y a jquery, tether y bootstrap (al 
final): 


<link rel="stylesheet” href="https://maxcdn.bootstrapcdn. 
com/bootstrap/4.0.09 su. 








<script src-"https://code.jquery.com/jquery ... 


Afiadiremos un elemento div con la clase container alrededor de nuestro 
title para que quede así: 


«div class-"container"» 


«hl»((title)])«/hl» 





</div> 


En la página de Bootstrap dedicada a Cards (https://v4-alpha.getbootstrap. 
com/components/card/) localizamos el apartado Titles, text, and links y 


copiamos (Copy) el ejemplo que muestra: 
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<div class-"card"» 
<div class-"card-block"» 


<h4 class-"card-title"»Card title</h4> 





<h6 class-"card-subtitle mb-2 text-muted"»Card sub- 
title</h6> 


<p class="card-text”>Some quick example text to build 
on the card title and make up the bulk of the card's 
content .</p> 





<a href="*" class-"card-link"»Card link</a> 








«a href="*" class-"card-link"»Another link</a> 


</div> 


«fdiv- 





Lo pegamos detrás del tag </h1> que cierra el título, guardamos el archivo 
y arrancamos la aplicación (con ng serve desde C:1Ej100_angular>092_ 
btCards) para ver cómo se ve nuestra aplicación en el navegador. 


/ ÍA BiCards x NEM 
€ > C f |O locahost4z00.. QA w|% a € o^» : 


» | Otros marcadores 


092 Bootstrap Cards 


Card title 
Card subtitle 


Some quick example text to build on the card title and make up 
the bul« of rhe card's coment, 











Card link Another link 





4. Modifiquemos el tamaño de nuestra pantalla y comprobemos cómo la 
tarjeta se adapta a cada tamaño. 








€ > GC Q |O localhost4200/4 Q ced x AU 


€ » C a (orones. à &j i 


092 Bootstrap Cards Otras marcadores 
parties 092 Bootstrap Cards 


Some quick example text to build on the card title and make up the bulk of the card's content, 


Car limk Another knk Card title 
Card subtitle 





Some quick example text tc build cn the card 
title and make up the bulk of the card's 
content. 


Card link Another link 


El gran libro de Angular 403 





5. Para el siguiente ejemplo, necesitaremos disponer de una imagen, la cual, al 
igual que explicamos en el ejercicio 087, almacenaremos en una carpeta 
creada en nuestro proyecto y denominada src/images. La imagen la 
llamaremos imgl.jpg. 


v [ 092 btCards 


> o git 
> lag e2e 


> (S node modules 


v a src 
> i app 
> gg assets 


> gg environments 


[D favicon.ico 





6. El siguiente ejemplo es de los más completos ya que mezcla diferentes 
funcionalidades en uno solo. Dicho ejemplo lo fabricaremos localizando 
el apartado Kitchen sink y copiando (Copy) su contenido para pegarlo a 
continuación del cierre del tag div de la tarjeta anterior: 


</div> 
«div class="card” style="width: 20rem;"» 


<img class-"card-img-top" src="...” alt-"Card image 


cap"» 





«div class-"card-block"» 


<h4 class-"card-title"»Card title</h4> 


<p class="card-text”>Some quick example text to build 


on the card title and make up the bulk of the card's 


content .</p> 


</div> 
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«ul class-"list-group list-group-flush”> 
<li class-"list-group-item"»Cras justo odio</1li> 


«li class-"list-group-item"»Dapibus ac facilisis in</ 
li» 





<li class-"list-group-item"»Vestibulum at eros«/li» 
</ul> 
<div class-"card-block"» 


«a href-"i4" class=" card=link">Card link</a> 





«a href="*" class-"card-link"»Another link</a> 


</div> 


</div> 





Añadimos un <br> entre ambas tarjetas y modificamos el src del código 
copiado para que quede de la siguiente manera: 


<img class-"card-img-top" src-"images/imgl.jpg" alt-"Card 


image cap”> 





Guardamos y vemos el archivo en el navegador. 


LQ acá x NUR 
€20 0 [O iocahosa a xr] i 


Otros marcadores 


Card title 


Same quick example text to build on 
tne card title and make up the bulk of 
the card's content 

Cras justo odio 

Dapibus ac facilius im 


Vestibulum at eros 


Cardánk — Another lk 





7. Por ültimo, localice el ejemplo asociado al apartado Image overlays, copie 
su contenido (Copy) y péguelo a continuación del div correspondiente 
al ejemplo anterior. Inserte un «BR» entre div para dejar una fila de 
separación. 
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8. Modifique el sre para que apunte a images/imgl.jpg. 


9. Guarde el archivo y visualícelo en el navegador. 


Cards 


C ( (0 localhost42 


Card title 


This is a wider cari 





10. Cambie el navegador de tamaño (el ancho) y compruebe la adaptación de 
esta tarjeta. 








x 


Q € 0Olocalhosts. YA + 


Ores marcadores 


Card title 


^ 


Card title 





11. Le invitamos a que pruebe más ejemplos para comprobar las diversas 
funcionalidades expuestas en la página de Cards de Bootstrap. 


406 El gran libro de Angular 





WE Bootstrap: Instalación 
local 


Otra forma de trabajar con las librerías de Bootstrap 
es descargándolas sobre nuestro propio puesto de tra- 

bajo y referenciándolas desde nuestro proyecto. Esto 
aporta alguna ventaja como puede ser poder trabajar 
sin conexión y un aumento de la eficiencia. Así pues, 
en los próximos ejercicios, usaremos la instalación lo- 
cal para probar una nueva forma de utilizar Boots- 
trap. Para conseguir esta instalación, descargaremos 
las librerías de Bootstrap, jQuery y Tether y las in- 
cluiremos en nuestro proyecto. Veamos los detalles de 
cada una de las descargas: 





e Descarga de bootstrap: en la página https://v4-alpha.getbootstrap.com/ 
getting-started/download/ descargaremos Bootstrap CSS and JS pulsando 
sobre el botón “Download Bootstrap”. Dependiendo del momento en el 
que nos descarguemos el archivo, su nombre (o versión) puede variar, pero, en 
definitiva, nos ofrecerá descargar un archivo similar al siguiente: bootstrap- 
4.0.0-alpha.6-dist.zip. Podemos descargarlo en un directorio temporal 
para poder extraerlo más fácilmente. Una vez descargado, lo extraemos y 
comprobamos que en su interior hay dos carpetas (css y js), cada una de ellas 
con distintas librerías. 





e Descarga de jQuery: acudiremos a la siguiente página: https://jquery. 
com/download/ y localizaremos la opción: Download the compressed, 
production jQuery 3.2.1 slim build (https://code.jquery.com/jquery- 
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3.2.1.slim.min.js). Esta es la versión comprimida que ocupa menos espacio y 
que será suficiente para conseguir nuestro propósito. 





jQuery 


write less, do more. 


Download APIDocumentation EU EM xli 


Downloading jQuery 


Compressed and uncompressed copies of jQuery files are avadable. The 
uncompressed file is best used dunng development ar debugging: he compressed file 
saves bandwidth and improves performance in producbon. You can also download a 
seurcemap file for use when debugging with a compressed file. The map file es not 
required for users to run jQuery, it just improves the developers debugger experience 
As cl jQuery 1 11072 1 0 the TT seuresltappinalifil: comment is nal inciuded m fe 
compressed ble 


Todacaly download these fles, roht-ckcx the link and select “Save as. * from me 
menu. 
¡Query 


For help whan upgrading ¡Quary, please see the upgrade quiós most relevant to your 
version. We also recommend using fe jQuery Megrate pugn 





Dowricad the compressed, production ¡Query 9.2 1 


e Descarga de Tether: acudiremos a la página: http://tether.io/ y pulsaremos 
sobre el botón: Download ZIP (v1.3.3) para descargar un fichero con 
un nombre similar al siguiente: tether-1.3.3.zip. En nuestro temporal, lo 
descomprimimos y más tarde extraeremos lo necesario. 


Open Source 


Tether _ 


A client-side library to make 
absolutely positioned elements 
attach to elements in the page 
efficiently. 





Una vez que ya disponemos de todas las librerías que vamos a necesitar, crearemos 
un proyecto para adjuntarlas y usarlas. 


1. En primer lugar, nos ubicamos en Ej100_angular y creamos el proyecto 
btInsLocal tecleando ng new btInsLocal. 


2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100_angular, escribiremos lo siguiente: 





C:\Ej100_angular>rename btInsLocal 093_btInsLocal 
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Abrimos nuestro proyecto (por ejemplo, con Atom) y, bajo la carpeta src/ 
assets, crearemos las carpetas sobre las que copiaremos, respectivamente, 
las librerías indicadas a continuación (1): 





Carpeta Librería 


bootstrap4/css bootstrap.min.css 
bootstrap4/js bootstrap.min.js 


jquery jquery.slim.min.js 





tether tether.min.js 


A continuación, hemos de modificar el archivo angular-cli.json para ha- 
cer referencia a estas librerías. Para ello, una vez abierto este archivo, locali- 
zamos el apartado que contiene lo siguiente: 


"styles": [ 


"styles.css" 





Y lo modificamos por este contenido: 
"styles": [ 
styles. css”, 
"assets/bootstrap4/css/bootstrap.min.css" 
l, 
"soripts": [ 
"assets/jquery/jquery-3.2.1.slim.min.js", 


"assets/tether/tether.min.js", 


"assets/bootstrap4/js/bootstrap.min.js" 


l, 





Guardamos el archivo y abrimos el archivo app-component.ts para modi- 
ficar el contenido de title y poner “093 Bootstrap instalación local”. 


3. Desde el directorio C:NEj100 angular-093 btInsLocal arrancaremos la 


aplicación tecleando ng serve y comprobaremos en el navegador cómo se 
visualiza la misma sin ningün error. 
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o x 


/ Q sueiocat x^ Ez 


> Q Ó |O tocalho:t:4200 a te | faBece0nos: 


"| Circe marzadores 


093 Bootstrap instalación local 





4. Para comprobar que la instalación funciona correctamente, podemos acudir 
a la página de Bootstrap Documentation y, en Search, buscar Colors 


para acceder a la página https://v4-alpha.getbootstrap.com/utilities/colors/. 


Una vez aquí, localizamos el ejemplo que hay antes del apartado Dealing 
with specificity y copiamos las tres primeras líneas del mismo. Una vez 
copiadas, las pegaremos al final del contenido de nuestro archivo app. 
component.html justo debajo del cierre de </h1> de nuestro título. 


5. Para que se visualice mejor, envolveremos todo el contenido de la página 
en un div con la clase container, de forma que todo quede de la siguiente 
manera: 


«div class-"container"» 
«hi»5[[title)]«/h1» 


«div class-"bg-primary text-white”>Nullam id dolor id 


nibh ultricies vehicula ut id elit.</div> 





«div class-"bg-success text-white"»Duis mollis, est non 


commodo luctus, nisi erat porttitor ligula.</div> 





«div class-"bg-info text-white"»Maecenas sed diam eget 


risus varius blandit sit amet non magna.</div> 


</div> 





Guardamos el archivo y vemos cómo se visualiza en el navegador. 


ari . pc O : 
» Otros mecadons 


093 Bootstrap instalación 








local 


Nullam id dolor id nibh ultricies vehicula ut id elit 


Duis mollis, est non commodo luctus, nisi erat porttitor ligula. 


Maecenas sed diam eget risus vanus blandit sit amet non magna 





6. Hagamos alguna prueba más buscando el tema Typography (por favor, 
use Search) y, dentro de la página, localice Text transform para copiar el 
ejemplo propuesto y pegar a continuación de lo anterior (antes del cierre del 
último </div>) lo siguiente: 
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<div class="container my-2” style="border-style: so- 
lido 





<p class-"text-lowercase"»Lowercased text.</p> 


<p class="text-uppercase”>Uppercased text.</p> 








<p class-"text-capitalize"»CapiTaliZed text.</p> 


</div> 





Además de añadir un contenedor, un borde y un margen sobre el eje y (my- 
2), veremos la conversión a minúsculas, mayúsculas y “capitaliza- 
ción” del texto. 


O dica ua 
¿00 Oronzo cr. Beo : 


» hoc curacion 


093 Bootstrap instalación local 


ritilor Bela. 


met non magra 
lawercased text. 
UPPERCASED TEXT 


CapilalZed Fet 





7. Por último, localice el apartado Font weight and italics y copie su 
ejemplo (Copy) para pegarlo y envolverlo con un div (con la clase 
container y otro borde diferente) a continuación del bloque anterior para 
que quede de la siguiente manera: 


<div class-"container" style-"border-style: double;”> 





<p class="font-weight-bold“>Bold text.</p> 


<p class="font-weight-normal”>Normal weight text.</p> 








<p class-"font-italic"»Italic text.</p> 





</div> 


Guarde el archivo y observe cómo se ve en el navegador. 


FO ariaa xu 
+00 O ronem atë aneo: 


LI Dren eura one 


093 Bootstrap instalación local 


Vullam id dolor id nibh ultr ehiad ut id eb 
huis mollis, est non com nis *t porttitor iyula. 


fancenas sod diam eget risu vanus blandit sit amet non magna 
knwescorsesd text 
UPPERCASED TEXT 


Capitalized Test 


Bold text. 


Normal woight tod. 


italic text 
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8. Compruebe cómo se adapta el texto a los diferentes tamaños de pantalla. 


€ 9 Œ f |Otocamostizoo a a 4 a i 


093 Bootstrap 
instalación loca 


sed diam eget risus varius blandit 


sit amet non magna 


lowercased text. 
UPPERCASED TEXT. 


CapiTaliZed Text. 


Bold text. 
Normal weight text. 


Italic text, 
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4.. Bootstrap: Carousel 


El carrusel es un elemento de Bootstrap que nos permite realizar presentaciones 
muy vistosas a través de la visualización de imágenes, texto y otros elementos de 
forma cíclica. Como de costumbre, en la página de Bootstrap dedicada a este tema 
(https://v4-alpha.getbootstrap.com/components/carousel/) encontraremos diversos 
ejemplos listos para ser copiados y pegados en nuestra página para poder adaptarlos 
posteriormente a nuestras necesidades con poco esfuerzo. 


Si analizamos la página nos encontraremos los siguientes temas: 


e Slides only: muestra solo diapositivas (una detrás de otra). 

e With controls: añade controles para desplazarnos por las diapositivas 
anterior y posterior. 

e With indicators: con elementos que nos permiten desplazarnos directamente 
a una diapositiva en concreto. 

e With captions: permite añadir subtítulos que pueden mostrarse o no en 
función del tamaño de la vista. 

e Usage: opciones que permiten determinar la posición del carrusel, la 
velocidad de transición de una diapositiva a otra, si ha de reaccionar a 
eventos de teclado, etc. 


A continuación, vamos a realizar un ejercicio en el que veremos algunos ejemplos 
de los descritos en la página. 


1. En primer lugar, nos ubicamos en Ej100_angular y creamos el proyecto 
btCarousel tecleando ng new btCarousel. 


2. Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro número de ejercicio. Para ello, estando ubicados en el directorio 
Ej100_angular, escribiremos lo siguiente: 








C:NEj100 angular>rename btCarousel 0 94 btCarousel 


Abrimos nuestro proyecto (por ejemplo, con Atom) y abrimos el archivo 
app.component.ts para modificar el título (title) y poner por ejemplo 
“094 Bootstrap Carousel”. 
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3. Tal y como explicamos en el ejercicio anterior, 
instalaremos las librerías de forma local 
descargándolas e incorporándolas en el proyecto 
bajo la carpeta assets. Si ha realizado el ejercicio 
anterior, puede copiar la carpeta assets y pegarla 
bajo src de este mismo ejercicio. No olvide 
modificar el archivo angular-cli.json para hacer 
referencia a estas librerías tal y como se explicó. 


v B src 
> i pp 
v E assets 
v WU bootstrap4 
v aH css 
B bootstrap.min.css 


"m: 
[B | bootstrap.min.js 
Y il ¡query 
Jquery.slim.min.js 
v gg tether 


tether.min.js 








Importante 


4. A continuación, en nuestro archivo app.component.html añadiremos un 
elemento div con la clase container alrededor de nuestro title para que 


quede así: 


<div class-"container-fluid"» 
<h1>{{title}}</h1> 


</div> 


Para este ejercicio, necesitaremos tres imágenes (p. 


e img3.jpg) que depositaremos en una nueva 
carpeta llamada images que crearemos bajo src. 
Procure que sean imágenes de un cierto tamaño 
para que al mostrarlas en pantalla grande se vean 
bien. 


5. En la página de Bootstrap/Carousel (https://v4- 
alpha.getbootstrap.com/components/carousel/) 
localizamos el ejemplo que muestra bajo el 
apartado With controls y copiamos su contenido 
para pegarlo a continuación del cierre del tag </ 
h1> que cierra nuestro title: 





ej., img1.jpg, img2.jpg 


v E src 
> lg app 
> ag assets 


> Bg environments 


v lg images 
la) imgl.jpg 
O img2.jpg 
la) img3jpg 
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Descargado en: eybooks.com 





<hl1>1[(title))</h1> 





<div id-"carouselExampleControls"class-"carousel slide”- 





data-ride-"carousel"» 


«div class-"carous 





l-inner"role-"listbox"» 





«div class-"carousel-item active"» 


«img class-"d-block imgetiuid"src-",.."alt-e"First 


slide"» 





edv 
«div class-"carousel-item"» 


<img class="d-block img-fluid"src-z"..."alt-"Second 


slide”> 





</div> 
<div class-"carousel-item"» 


."alt-"Third 





<img class-"d-block img-fluid"src-".. 
slide"» 


</div> 
do 


<a class="carousel-control-prev”href="tfcarouselExam- 


pleControls"role-"button"data-slide-"prev"» 


«span class-"carousel-control-prev-icon"aria-hid- 


den-"true"»«/span» 
<span class="sr-only”>Previous</span> 
</a> 


<a class="carousel-control-next”“href="*fcarouselExam- 


pleControls"role-"button"data-slide-"next"» 


<span class-"carousel-control-next-icon"aria-hid- 


den-"true"»«/span» 





<span class="sr-only”>Next</span> 
</a> 


</div> 





Ahora, modificaremos las propiedades src de cada imagen para que apunten 
a la ubicación de nuestras imágenes y añadiremos la clase w-100 a las clases 
del tag img de la siguiente manera: 
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«img class-"d-block img-fluid w-100" src-"images/imgl.jpg" 





alt-"First slide"» 








Para las imágenes 2 y 3 realizaremos la misma operación. Guardaremos el 
archivo y arrancaremos la aplicación ubicándonos en C:1Ej100_angu- 
larN094 btCarousel y tecleando ng serve. Observe el resultado en el na- 
vegador accediendo a el URL http://localhost:4200/. 





Pulse sobre las flechas laterales para provocar la visualización de las imágenes. 
Si no las pulsa, estas se irán visualizando cada cierto tiempo. 


094 Bootstrap Carouse 





Varíe el tamaño de la página para comprobar cómo la visualización se 
adapta en cada momento. 


Di cm z 2 : 
^86 07. +20 umani 


094 Bootstrap 094 Bootstrap Carousel 
Carousel z 


0009 9 











A continuación, vamos a probar otro ejemplo similar, pero algo más completo. 
Para ello, localizaremos un poco más abajo, en la misma página de Bootstrap, 
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el apartado With indicators y copiaremos (Copy) su contenido para pegarlo 
en nuestra página app.component.html a continuación del </div> que 
cierra nuestro carrusel anterior: 





</a> 


y eos 





«div id-"carouselExampleIndicators" class-"carousel sli- 


de" data-ride-"carousel"» 


«ol class-"carousel-indicators"» 





«li data-target-"ftcarouselExam 


ta-slide-to-"0" class-"active"»«/li» 


«li data-target="tcarouselExam 


ta-slide-to-"1"»«/li» 


«li data-target="tfcaro 


























ta-slide-to-"2"»«/li» 


<lol> 


«div class-"carousel-inner" 


pleln 


pleIn 





pleIn 


«div class-"carousel-item active"» 





dica 


dica! 





tors” da= 


role-"listbox"» 


«img class-"d-block img-fluid” src="...” alt-"First 


slide"» 


«/div- 


«div class-"carousel-item"» 


<img class="d-block img-fluid" src="...” alt="Second 


slide”> 


</div> 





«div class-"carousel-item"» 


<img class-"d-block img-fluid” src="...” alt-"Third 


slide”> 
</div> 


</div> 


«a class-"carousel-control-prev" href=”#carousel] 











plelndicators" role-"button" data-slide-"prev"» 


<span 8] 


den-"true"»«/span» 


«span cl 








lass-"carousel-control-prev-icon" aria-hid- 


lass="sr-only”>Previous</span 
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</a> 





<a class-"carousel-control-next" href="*fcarouselExam- 


plelndicators" role-"button" data-slide-"next"» 


<span class-"carousel-control-next-icon" aria-hid- 


den="true”“></span> 





<span class="sr-only”>Next</span> 
</a> 


</div> 





Al igual que en el caso anterior, modificaremos los tags correspondientes a 
las imágenes para que apunten a las ubicaciones de nuestro proyecto y con- 
tengan la clase w-100: 





«img class="d-block img-fluid w-100" src-e"images/imgl.jpg" 





alt-"First slide"» 


Para separar un carrusel de otro, añadiremos la clase my-2 para incluir un 
margen en el eje y (verticalmente) y un borde al bloque. La primera línea de 
nuestro carrusel quedará así: 





«div id-"carouselExampleIndicators" class-"carousel sli- 
de my-2" data-ride-"carousel" style-"border-style: 
double;"» 





Seguidamente, afiadiremos subtítulos a cada imagen y, localizando el apar- 
tado With captions, copiaremos el bloque que hay justo debajo de la ima- 
gen que contiene la clase carousel-caption: 

<img see". albt-"...,"- 


«div class-"carousel-caption d-none d-md-block"» 


LAS y h3- 


<P>. EJ po 





</div> 


Pegaremos dicho bloque bajo el tag de cada una de nuestras imágenes y aña- 
diremos un texto para los tags <h3> y <p>. Por ejemplo, el bloque asociado 
a la imagen 1 quedaría así: 
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«img class-"d-block img-fluid w-100" src="images/imgl.jpg” 
alt="First slide”> 





«div class-"carousel-caption d-none d-md-block”> 


<h3>Imagen 1</h3> 





<p>Esta es una prueba de la imagen 1</p> 


</div> 





Copiemos dicho bloque sobre el resto de imágenes modificando Imagen 1 
por la que corresponda, guardemos el archivo y visualicemos cómo queda 
en el navegador. Compruebe cómo pulsando sobre los indicadores existen- 


tes a pie de página, se muestra la imagen asociada a cada uno de los 
mismos. 
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5. Bootstrap: Collapse 


Mediante el complemento Collapse, podemos mostrar u ocultar determinadas partes 
de nuestra página facilitando la optimización del espacio y proporcionando un efecto 
visual muy agradable. La idea es que podamos colapsar o expandir un bloque como 
si fuera un acordeón. En el siguiente ejercicio, vamos a poner en marcha uno de los 
ejemplos expuestos en la página de Bootstrap dedicado a este tema (https://v4-al- 


pha.getbootstrap.com/components/collapse/) y lo personalizaremos un poco para po- 


der jugar con él. 


E 


En primer lugar, nos ubicamos en Ej100_angular y creamos el proyecto 
btCollapse tecleando ng new btCollapse. 


Seguidamente, renombraremos el proyecto para que haga referencia a nuestro 
número de ejercicio. Para ello, ubicados en el directorio Ej100_angular, 
escribiremos lo siguiente: 





C:NEj100 angular»rename btCollapse 095 btCollapse 


Abrimos nuestro proyecto (por ejemplo, con Atom) y abrimos el archivo 
app.component.ts para modificar el título (title) y poner por ejemplo 
“095 Bootstrap Collapse”. 


Tal y como explicamos en el ejercicio anterior, instalaremos las librerías de 
forma local descargándolas e incorporándolas en el proyecto bajo la carpeta 
assets y también modificaremos el archivo angular-cli.json para hacer 
referencia a estas librerías. Por favor, revise el ejercicio 093 si tiene alguna 
duda. 


A continuación, en nuestro archivo app.component.html añadiremos un 
elemento div con la clase container alrededor de nuestro title para que 


quede así: 


<div class-"container-fluid"» 


<hl1>((title))</h1> 


</div> 
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En la página de Bootstrap/Collapse localizamos el primer ejemplo y co- 
piamos su contenido para pegarlo a continuación del cierre del tag </h1> 
que cierra nuestro title: 





<p> 


<a class-"btn btn-primary” data-toggle-"collapse" hre- 





f="fcollapseExample” aria-expanded-"false" aria-con- 








trols="collapseExample”> 








Link with href 
</a> 


<button class-"btn btn-primary” type-"button" data-tog- 








gle="collapse” data-target="tcollapseExample” aria-ex- 
panded-"false" 


aria-controls-"collapseExample"» 








Button with data-target 
</button> 


</p> 





«div class-"collapse" id="collapseExample”> 
«div class-"card card-block"» 


Anim pariatur cliche reprehenderit, enim eiusmod high 








life accusamus terry richardson ad squid. Nihil anim 
keffiyeh helvetica, craft beer labore wes anderson cred 





nesciunt sapiente ea proident. 


</div> 


</div> 





Guardaremos el archivo y arrancaremos la aplicación ubicándonos en C:\ 
Ej100_angular1095_btCollapse y tecleando mg serve. Observe el resulta- 


do en el navegador accediendo al URL http:// 
Importante 


localhost:4200/. 


J Q coapse un 
€ > C f [O anoto arg. Ben: 
marcodore 


095 Bootstrap Collapse 
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5. Pulsemos ambos botones para comprobar cómo se muestra y oculta el 
bloque asociado. 


//Q eco XN 
€ Q Ô |O localhost4200 & *|e 4 BH e o : 


095 Bootstrap Collapse 
NT Button with data-target 


Anim pariatur cliche reprehenderit, enim eiusmad high life 
accusamus terry richardson ad squid. Nihil anim keffiyeh 
helvetica, craft beer labore wes anderson cred nesciunt 
saplente ea proident 





6. Ahora, modificaremos un poco el código copiado para personalizarlo y 
simplificarlo. Básicamente, lo que haremos es rebautizar el id del div asociado 
a la clase collapse y las referencias al mismo, tanto en el tag «a» como 
<button>. El código quedará de la siguiente manera: 


<p> 


<a class-"btn btn-primary" data-toggle-"collapse" hre- 
f=" funo” aria-expanded-"false" aria-controls-"uno"»U- 
no Con Ref</a> 


<button class-"btn btn-primary” type-"button" data-to- 
ggle-"collapse" data-target-"f4uno" aria-expanded="- 
false" aria-controls-"uno"» 


Uno con boton 
</button> 
</p> 
«div class-"collapse" id-"uno"» 
«div class="card card-block"»Mi bloque uno</div> 


</div> 





Guardamos el archivo y comprobamos de nuevo cómo queda en el navega- 
dor. Observe que el bloque se muestra y oculta alternativamente sea cual sea 
el botón que pulsemos. 


[8 cospe JA 


€ > C (y Q localnost4200 a a + «neo: 
Otros marcodcres 


095 Bootstrap Collapse 


Uno Con Ref Uno con boton 


Mi bloque uno 
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7. Para dar un poco más de juego al ejemplo, introduciremos un bloque dentro 
de otro para anidar los acordeones. 


8. En este caso, copiaremos debajo del texto “Mi bloque uno", un bloque similar 
al copiado y adaptado inicialmente, el cual empieza en el tag <p> y acaba en el 
tag </div>. La idea, en este caso, es que el botón copiado relacionado con el 
tag <a> apunte a un bloque denominado “dos”, y el botón tipo “button” 
apunte a un div llamado “tres”. En definitiva, el bloque que contenía el texto 
“Mi bloque uno” quedará de la siguiente manera: 





«div class-"collapse" id-"uno"» 
«div class-"card card-block"» 
Mi bloque uno 
<p> 


<a class="btn btn-primary” data-toggle="collapse” 





href="fdos” aria-expanded-"false" aria-controls="- 
dos"»Dos Con Ref</a> 


«button elass-"btn btn-primary" type-"button" da- 
ta-toggle-"collapse" data-target="ttres” aria-expande- 


d-"false" aria-controls-"tres"» 
Tres con boton 
</button> 
</p> 


<div class-"collapse" id-"dos"» 


«div class-"card card-block"»Mi bloque dos</div> 


«/div» 
«div class-"collapse" id-"tres"» 
«div class-"card card-block"»Mi bloque tres</div> 
«/div» 
«/div» 


</div> 





Guardamos el archivo y lo visualizamos en nuestro navegador. 
9. Si pulsamos cualquiera de los botones “Uno Con Ref” o “Uno con Boton”, 


aparece el bloque con el texto “Mi bloque uno” con los dos botones 
incluidos en el mismo. 
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JE ercolages x VW 
€ > C à [O toamostazoo are - 40: 


Otros marcadores 


095 Bootstrap Collapse 


Mi bloque uno 


Tres con boton 





10. Si pulsamos el botón “Dos Con Ref”, veremos el bloque “dos” asociado al 
mismo. 


/m BiCcllapco x NIA 
€ > Q Ñ |O localho=:4200 a a] e neo: 
» Otros mercodores 


095 Bootstrap Collapse 


Mi bl uno 
Kr Tres con botor 


Mi bloque dos 











11. Si pulsamos el botón "Tres con boton", veremos el bloque “tres” 
asociado al mismo. 


/a BtCoilspse ANOS 
€ > Q (t [O localho:4200 arl Moo: 


» Otros mercadores 


095 Bootstrap Collapse 


Uno con boton 


Mi bloque uno 


Dos Con Ref Tres con boton 


Mi bloque dos 


Mi bloque tres 





12. A partir de aquí, le invitamos a que pruebe cualquier combinación de 


pulsación de botones para ver cómo se comporta la visualización en función 
de su anidamiento. 
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Bootstrap: Dropdowns 


Los Dropdowns son elementos que se despliegan de forma interactiva y que per- 
miten mostrar listas de elementos como, por ejemplo, vínculos mediante los cuales 
se pueden realizar selecciones o acciones. Si analizamos la página de Bootstrap de- 


dicada a Dropdowns (https://v4-alpha.getbootstrap.com/components/dropdowns/), 


veremos que hace referencia a diferentes temas relacionados con: 


Diferentes tipos de botones: sencillos, 
separando la flecha del elemento en un botón 
aparte. 

Sizing: para botones pequeños (small) y 
grandes (large). 

Dropup variation: para que el despliegue de 
la lista se haga hacia arriba. 

Menu items: ofrece el uso de botones en lugar 
de links para las opciones. 

Menu alignment: permite alinear el despliegue 
de opciones a la derecha. 

Menu headers: inserción de cabeceras en la lista. 
Menu dividers: inclusión de divisores en la lista. 
Disabled menu items: deshabilita ítems de 
una lista. 


Importante 





En el siguiente ejercicio, adaptaremos uno de los ejemplos de dicha página para selec- 
cionar un color de la lista y aplicarlo a un bloque que muestra el resultado seleccionado. 


la 


3: 


Ubicados en Ej100_angular, creamos el proyecto btDropDown tecleando 


ng new btDropDown. 


Ahora, renombraremos el proyecto desde el directorio Ej100_angular, 


escribiendo lo siguiente: 





C:NEj100 angular»rename btDropDown 096 btDropDown 


Abrimos el proyecto y en app.component.ts modificamos title con “096 


Bootstrap btDropDown". 


Instalaremos las librerías localmente. Por favor, revise el ejercicio 093. 
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4. En app.component.html añadimos un div con la clase container 
alrededor de nuestro title así: 


«div class="container-fluid”“><h1>((titlej)</h1></div> 


Localizamos el primer ejemplo de Dropdowns, y lo pegamos en app.com- 
ponent.html detrás de </h1>: 





<div class-"container-fluid"» 
<h1>((title))</h1> 
«div class-"dropdown"» 


<button class-"btn btn-secondary dropdown-toggle” 





type-"putton" id-"dropdownMenuButton" data-toggle-"- 


dropdown" aria-haspopup-"true" 

aria-expanded-"false"» 
Dropdown button 

</button> 


<div class-"dropdown aria-labelledby="dropdown- 





MenuButton”> 
<a class="dropdown href="*">Action</a> 


<a class="dropdown href="*">Another action</ 
a> 








<a class-"dropdown href="*">Something else 
here</a> 


</div> 


</div> 





Guardamos el archivo y arrancaremos la aplicación desde C:1Ej100_angu- 
larN096 btDropDown tecleando ng serve. Observe el resultado en el na- 


vegador en el URL http://localhost:4200/. 


/ Q tidegDom x NU 


€ co O toralhost:4200 a tr Pas €: 


a x 


Orm marcadores 


096 Bootstrap btDropDown 


Dropdown button + 





5. Pulse sobre la lista para desplegarla y compruebe que funciona perfectamente. 


096 Bootstrap btDropDown 
Dropdown bution » | 


Action 


Another action 


Something else here 
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6. A continuación, crearemos un bloque de tipo “row” y dentro del mismo, dos 
bloques de tipo “col” donde reubicaremos nuestro elemento recién copiado 
y un nuevo div para mostrar el resultado de la selección, respectivamente, 
la cual, implementaremos a continuación. Las columnas ocuparán cinco 
columnas de la rejilla de Bootstrap (12 columnas), y así dejamos margins y 
paddings (m-1 y p-1) entre bloques. 


7. Ahora, el código de nuestro app.component.html quedará de la siguiente 
manera: 





«div class="container”> 
<hl>((title))</h1> 
<div class-"row “> 
«div eclass="sol e01-5 borde ml p-1*%> 
«div class-"dropdown"» 


«button class-"btn btn-secondary dropdown-tog- 
gle” type-"button" id="menul” data-toggle-"dropdown" 


aria-haspopup="true” 


aria-expanded-"false"»Dropdown«/button» 


«div class-"dropdown-menu" aria-labelledby="me- 


mal" 


<button class-"dropdown-item" type-"button 
(CULA) snmbli ("Azul')"»Azul«/button» 


<button class-"dropdown-item" type-"b 
(click)-"onCli ( 'Verde')"»Verde«/button» 




















<button class-"dropdown-item" type-"button 
(click)="onClick('Amarillo')”>Amarillo</button> 








</div> 
</div> 
</div> 


«div class-"col col-5 m-1 p-1 borde text-center” 
[ngStyle]="1 *background=color*+ colorl, "font-size': 
1130%'")”>0pcion: <b>{{ resl ))</b></div> 





</div> 


EAT 





En el fichero styles.css incluiremos la definición de la clase borde con el 
siguiente contenido: 
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.borde( border: 3px solid blue; ) 


En el archivo app.component.ts, la clase AppComponent quedará con 
el siguiente contenido: 


export class AppComponent { 





title = '096 Bootstrap Dropdowns’; 





resl:string = “Azul”; 


colorl:string = `‘\#A9F5F2';}; 


onClick (par:string){ 


this.resl=par; 
switch(this.res1) ( 


case “Verde”: this.colorl = "£A9F5BC"; break; 








case "Amarillo": this.colorl = "£4FFFF00"; break; 


default: this.colorl = “fA9F5F2"; break; 


LQ erecto x UA 
€ > € 0/0 tocamos ari. me. o: 


» |. Oros marcadores 


096 Bootstrap Dropdowns 








8. Añadimos la clase w-100 al botón que define el dropdown con id="menul” 
para que quede así: 


«button class=”btn btn-secondary dropdown-toggle w-100" 


Guardamos el archivo y vemos que el botón del Dropdown ocupará todo el 
bloque. 


/ 9 orte X UA 
€ > QC O 0 loma &*|£s242Heo: 


m | | Oros marcadores 








096 Bootstrap Dropdowns 
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9. Probemos desplegar el botón y seleccionar Verde o Amarillo. 


[O rogbo x [o /a WMopD oen un 
eco | D lecalbrast4200 aaf ane o: € > Q (y | hocalhos14200 & ti $:Bc0O0 : 
» Oros marcadores Oroz marcadores 


096 Bootstrap Dropdowns 096 Bootstrap Dropdowns 


Dropdown ~ | Opcion: Verde | Dropdown ~ Opcion: Amarillo 
And | 


Amarillo 





10. Sustituyamos la clase btn-secondary del primer botón para poner btn- 
success para ver cómo queda. 


/ O somero x Nan 
€ 5 C Ó |O cautio & * s «nego: 
- Oyos mcadores 


096 Bootstrap Dropdowns 


Dropdown » 





11. Por último, añadiremos la clase btn-sm al primer botón para ver cómo el 
botón se muestra más pequeño. El código asociado al botón queda de la 
siguiente manera: 


(8 Oroes A 
€ 5 C O |O cahat ari. ..2q.4%40:; 
^ Otros moradores ! 


096 Bootstrap Dropdowns 


— 





«button class-"btn btn-success dropdown-toggle w-100 
btn-sm” type-"button" id="menul” data-toggle-"drop- 


down" aria-haspopup="true” 


aria-expanded-"false"»Dropdown«/button» 
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7. Bootstrap: Forms 


Bootstrap ofrece una gran cantidad de controles y clases para la fabricación de for- 
mularios con elementos de diferentes estilos y tamafios. Puede consultar la página 
en el apartado Forms de Bootstrap (https://v4-alpha.getbootstrap.com/compo- 
nents/forms/). Por defecto, se aplican estilos a todos los controles y estos se api- 
lan verticalmente, ya que Bootstrap establece display: block y width: 100% 
a casi todos los componentes del formulario. No obstante, podemos usar la clase 
form-inline para colocar las etiquetas a la izquierda de los campos y hacer que los 
controles se muestren en la medida de lo posible de forma horizontal. 


Los clásicos controles soportados son: Input, Textarea, Checkbox, Radio, Se- 
lect y Controles estáticos. 


La etiqueta y el input asociados a un campo se suelen 

agrupar en un div al que se le afiade la clase form- 
group para optimizar mejor el espacio y obtener una 
mayor organización. En los controles de tipo input, 
podemos usar placeholder para mostrar un texto 
explicativo sobre lo que se solicita. En los controles 
input, textarea y select, podemos añadir la clase 
form-control para que el ancho se establezca a wid- 


th: 100%. 


Los campos de tipo input pueden ser: de texto (text, 
password), de fecha (datetime, datetime-local, 
date, month, time, week), de número (number) y 
otros (email, url, search, tel, y color). 





A continuación, fabricaremos un formulario sencillo con algunos controles para 
mostrar algunas de las funcionalidades de las clases que Bootstrap ha preparado. 


1. Nos ubicamos en Ej100 angular y creamos el proyecto btForms tecleando 
ng new btForms. 


2. Seguidamente, renombraremos el proyecto para que haga referencia a 


nuestro nümero de ejercicio. Para ello, estando ubicados en el directorio 
Ej100 angular, escribiremos lo siguiente: 
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C:NEj100 angular»rename btForms 097 btForms 





Abrimos nuestro proyecto (por ejemplo, con Atom) y abrimos el archivo 
app.component.ts para modificar el título (title) y poner por ejemplo 
“097 Bootstrap Forms". 


3. Tal y como ya hemos explicado en ejercicios anteriores, instalaremos las 
librerías de forma local descargándolas e incorporándolas en el proyecto. Por 
favor, revise el ejercicio 093 si tiene alguna duda. 


4. A continuación, en nuestro archivo app.component.html añadiremos un 
elemento div con la clase container alrededor de nuestro title para que 
quede así: 


«div class-"container"» 


«hl1»5[(title)])«/hl1» 





</div> 


A continuación del tag </h1> anterior, insertaremos un formulario vacío 
solo con el botón submit: 





hf» 
«form» 


«button type-"submit" class-"btn btn-primary”>Submit</but- 
ton» 


«/form» 





Guarde el archivo y arranque la aplicación ubicándose en C:1Ej100_angu- 
larN097 btForms y tecleando ng serve. Observe el resultado en el nave- 


gador (http://localhost:4200/). 





AO Bros xx b 
é> C O (D localhost:4200 QrRIF e & e 


» Dtros marcadores 





097 Bootstrap Forms 





5. Ahora, desde de la página de Bootstrap dedicado a Forms, localizamos 
el tema Form controls y copiamos del primer ejemplo el grupo que hace 
referencia al exampleInputEmaill: 
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<div class="form-group”> 





<label for-"exampleInputEmaill"»Email address</label> 








<input type-"email" class-"form-control" id="exam- 





plelnputEmail1” aria-describedby="emailHelp” placehol- 








der-"Enter email”> 


«small id="emailHelp” class="form-text text-mute- 


d“>We' 11 never share your email with anyone else.</ 





small» 


</div> 





Lo pegamos antes del botón submit. Guardamos el archivo y vemos cómo 
queda en el navegador. 


/e Bifocms ua 
€ > C f |O tocalhost:4200 &a*tix Beto: 
» Otros marcadores 








097 Bootstrap Forms 


Email address 


Enter email 





We'll never share your email with anyone else. 


Si añadimos la clase form-inline al tag <form> veremos cómo los elementos 
se disponen horizontalmente en la pantalla: 





/n Bons x NN 
€ © 0 |O locahost:4200 


097 Bootstrap Forms 


Email address Enter email Well never share your email with anyone else 





«form class="form-inline”> 


Eliminamos esta clase para dejarlo como estaba antes y dejar que los contro- 
les se apilen verticalmente. 


Observe como al hacer clic sobre el e-mail, el borde del mismo cambia de 
color y, al empezar a escribir, desaparece el placeholder. 
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/n BtForms x WR 
€ > Q f |O locahosta200 arj amc 


» | Otros marcadores 


097 Bootstrap Forms 





Email address 


| juan 


We'll never share your email with anyone else, 


Submit 


8. Ahora copiamos el bloque anterior y lo pegamos debajo del mismo para 
cambiar algunos valores y convertirlo en un input de password. Ponemos 
lo siguiente: 





<div class="form-group”> 
<label for-"password"»Palabra de paso</label> 


<input type="password” class-"form-control" id-"example- 


password” aria-describedby-"password"» 


«small id="password” class-"form-text text-muted”>Introduzca 


password.</small> 





</div> 


Guardemos el archivo, visualicémoslo en el navegador e introduzcamos algo 
en el control para comprobar cómo oculta los caracteres introducidos. 


JO atoms una 
€ > Q 0 [O tocamostazoo axj*4Hneso: 
»| Otros marcadores 


097 Bootstrap Forms 


Email address 








Enter email 


We'll never share your email with anyone else 


Palabra de paso 





sascssanena 





Introduzca password, 


Submit 





9. Enel ejemplo de Bootstrap, buscamos la parte correspondiente al Select1 
(sencillo) y la pegamos a continuación del bloque anterior: 


El gran libro de Angular 433 





<div class="form-group”> 





<label for-"exampleSelectl"»5Example select</label> 








«select class-"form-control form-control-sm" id="exam- 


pleSelectl"» 
<option>1</option> 
<option>2</option> 
<option>3</option> 


<option>4</option> 








<option>5</option> 


</select> 


<> 





Guardamos el archivo, y en el navegador desplegamos la lista para ver cómo 
funciona. 


[onm ÓN 
€ > Q 0]0 bocaihost:1200 





097 Bootstrap Forms 


Email address 


| Enter email 





We'll never share your email with anyone else. 


Palabra de paso 


Introduzca password. 


Example select 











10. Ahora, en la página de Bootstrap, dentro del apartado Textual inputs, 
localizaremos el div que contiene el ejemplo example-date-input y pegaremos 
su contenido a continuación del bloque anterior: 
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<div class="form-group row”> 


«label for="example-date-input” class-"col-2 


col-form-label”>Date</label> 
<div class-"col-10"» 


<input class-"form-control" type-"date" va- 


lue-"2011-08-19" id="example-date-input”> 











«/div» 


«fd 





Guardamos la página y en el navegador, desplegaremos el control pulsando 
sobre la flecha. 


/o Before x Wa 
€ > C ( |O localhost 4200 are .—qw<uq—coe : 
Otros marcadores 


097 Bootstrap Forms 
Email address 


Well never share your erail with anyone else. 


Palabra de paso 


introduzca password. 


Example select 


1 


Date 19/03/2017 


marzo de 2017 + 5 
Submit 








11. En el mismo apartado Textual inputs, localizaremos el div que contiene el 
ejemplo example-time-input y pegaremos su contenido a continuación 
del bloque anterior: 
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<div class="form-group row”> 





<label for-"example-time-input" class-"col-2 


col-form-label”>Time</label> 
<div class-"col-10"» 


<input class-"form-control" type-"time" va- 


lue-"13:45:00" id-"example-time-input"» 





«/div» 


«/div» 





Guarde el archivo y pruebe en el navegador con el nuevo control para ver su 
comportamiento. 


[O rens Y 
€ > Q f} Í0tocalhosta200 ari. Boo: 


|, Otros marcadores 








097 Bootstrap Forms 


Email address 





Enter email 


We'll never share your email with anyone else. 


Palabra de paso 


introduzca password. 


Example select 


19/03/2017 


13:45 
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Los List group son elementos que permiten visualizar 
información mostrándola en forma de lista. En la pági- 
na se analizan diferentes funcionalidades relativas a las 
listas como por ejemplo: Active items (para indicar 
la selección activa), Disabled items (para deshabilitar 
ítems), Links and buttons (para crear listas a partir 
de links o de botones), Contextual classes (permite 
diseñar un fondo y un color con el estado), With ba- 
dges (permite añadir insignias para mostrar conteos 
de actividad; p. ej., mensajes no leídos, etc.), Custom 
content (permite realizar listas personalizadas aña- 
diendo prácticamente cualquier tag <HTML>). 


En el siguiente ejercicio crearemos un par de listas a 


o Bootstrap: List group 


Importante 





las que les añadiremos algunas funcionalidades propuestas en la página de Boots- 


trap dedicada a List group (https://v4-alpha.getbootstrap.com/components/ 


list-group/). 


1. Nos ubicamos en Ej100 angular y creamos el proyecto btListGroup 


tecleando ng new btListGroup. 


2. Renombraremos el proyecto para que haga referencia a nuestro nümero de 


ejercicio tecleando: 





:NEj100 angular»rename btListGroup 098 btListGroup 





Abrimos el proyecto y app.component.ts modificando title con ^098 


Bootstrap List group". 


3. Instalamos las librerías de forma local descargándolas (revise el capítulo 


093). 


4. En app.component.html añadiremos un div con la clase container 


alrededor de title: 


«div elass-"container"»«hl»[([title))«/hl1»«/div» 
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Ahora, copiamos el primer ejemplo de Bootstrap y lo pegamos detrás del 
tag </h1> que cierra title: 





aL 


«ul class-"list-group"» 


«li class-"list-group-item"»Cras justo odio«/li» 


elo 





Guarde el archivo y arranque la aplicación ubicándose en C:1Ej100_angu- 
lar^098 btListGroup y tecleando ng serve. Observe el resultado en el 


navegador (http://localhost:4200/). 


/ Q Sinu x UA 


€>c 0 |O tocsmos:.200,> ax 4 -.B e O : 





LJ Otros marcadores 


098 Bootstrap List group 
Cras justo adio 
Dapibus ac facilisis in 
Morbi leo risus 
Porta ac consectetur ac 


Vestibulum at eros 





5. Localice el apartado Links and buttons y copie (Copy) el primer ejemplo 
que empieza así: 


«div class-"list-gronunp"- 


«a href="*"” class-"list-group-item active”> 





Cras justo odio 


Lo modificaremos para que, al seleccionar un elemento de la lista, se mues- 
tre el resultado en un bloque a pie de pantalla y se cambie el color del mis- 
mo. Es similar al ejercicio 096 Bootstrap Dropdowns. 


6. Una vez modificado, el bloque quedará con el siguiente contenido: 


«div class-"list-group p-1"» 


«a href="*"” class-"list-group-item list-group-item- 


action justify-content-between" (click)-"onClic- 
k('Azul')"»5Azul«/a» 
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<a href-"4" class-"list-group-item list-group-item-ac- 





tion justify-content-between" (click)-"onClick( Ver- 
de’ )"»Verde«/a» 


«a href-"14" class-"list-group-item list-group-item-ac- 
tion justify-content-between" (click)-"onClick("'Amari- 
llo')"»Amarillo«/a» 

«/div» 

<div class-"col text-center" [ngstyle]="('background-co- 
lor”: colorl, “font-size”: *'130$')])"5Opcron: <b>(([ resi 
))«/b»«/div» 





Seguidamente, modificaremos app.component.ts para que la clase App- 
component quede así: 
export class AppComponent { 
title = '098 Bootstrap List group'; 
resl: string = "?"; 
colori: string = "4 D8D8D8'; 
onClick(par: string) ( 
this.resl - par; 
switch (this.resl) ( 
case "Verde": this.colorl = “fA9F5BC"; break; 
case "Amarillo": this.colorl = "£$FFFF00"; break; 


case "Azul": this.colorl = “fA9F5F2"; break; 





Guarde la aplicación y en el navegador y pulse sobre la lista para ver el 
resultado. 


—— e - O X : 2 D. 

/ O vete * WA JO vestig UA 

€ > C 0/0 tancia &wst4"nenoi! € 5 C OIO kannan are. peo 
- Dr eco EO DID AES Orca necadir 


098 Bootstrap List group 098 Bootstrap List group 


Azul Arul 





Verde Verde 


Amarillo Amarillo 
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- n x - a x 
JO mono * wn ZQ posteo x ¡UA 


€ > € Q |O inca ari. mei € > € Ò |O creano an e <- He. 9: 


Oros mezaton LI tics maradona 


098 Bootstrap List group | | 098 Bootstrap List group 


Opcion: Amarillo 





7. Por ültimo, observaremos el ejemplo descrito en el apartado With badges 
y afiadiremos un span con las clases badge al lado de cada descripción de 
elemento de lista, quedando de la siguiente manera: 


«div glass-"listegroup pel" 


<a href="*"” class-"list-group-item list-group-item- 
action justify-content-between" (click)-"onClic- 


k('Azul')"»Azul 


<span class-"badge badge-default badge-pi11”>(( 
numl ))</span></a> 





<a href-"4" class-"list-group-item list-group-item-ac- 
tion justify-content-between" (click)-"onClick(" 'Ver- 
de’ )"»Verde 


<span class-"badge badge-default badge-pi11”>(( 
num2 ))</span></a> 


<a href-"4" class-"list-group-item list-group-item-ac- 
tion justify-content-between" (click)-"onClick("'Ama- 


rillo')”>Amarillo 


<span class-"badge badge-default badge-pi11”>(( 
num3 ))</span></a> 





</div> 


«div class-"col text-center” [ngStyle]="('background-co- 


lor” ocolorl, ‘font-size’? 11303" ">oOpcion: <b>(1 
resl ))«/b»«/div» 





A la clase Appcomponent del archivo app.component.ts hay que aña- 
dirle ciertas variables para contar los clics cada vez que se haga clic sobre un 
elemento y modificar el método onClick() así: 
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export class AppComponent { 


title = '098 Bootstrap List group'; 
resl: string = "?"; 
colori: string = "D8D8D8'; 
numl: number = 
num2: number 
num3: number 
onClick (par: string) { 
this.resl = par; 
switch (this.resl) { 


case “Verde”: this.colorl = “FA9F5BC”; this.num2 += 





break; 


case "Amarillo": this.colorl = "£FFFF00"; this.num3 


1; break; 


case “Azul”: this.colorl = "£A9F5F2"; this.numl += 


break; 





Guarde el archivo y visualícelo en el navegador. Pruebe haciendo clic sobre 
cualquier elemento y vea cómo se incrementan los contadores. 


D besoo EN MIA UA 
€ > € 0/0 nacen art. LLO: 


”i Orce marcador „l Oros marcador 


098 Bootstrap List group 098 Bootstrap List group 
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Bootstrap: Navbar 


Navbar es un elemento contenedor que se muestra en forma de barra y que per- 
mite incluir encabezados y opciones que ayudan a la navegación dentro de nuestra 
aplicación y que ofrece comportamientos responsive. 


En la página (https://v4-alpha.getbootstrap.com/components/navbar/) que Boots- 


trap dedica a este tema, podemos encontrar explicaciones sobre: 


How it Works: contenido fluido por defecto, fácil alineamiento, comportamiento 
responsive, etc. 

Supported content: soporta subcomponentes para mostrar la marca o 
nombre de proyecto, navegación, colapso y expansión de información, 
controles de formulario con form-inline, cadenas de texto, etc. 

Nav: los elementos se muestran horizontalmente y alineados siempre que 
sea posible. 

Forms: permite aplicar controles de formulario con form-inline. 

Text: pueden contener texto. 

Color schemes: permite aplicar temas (fondos y colores para textos). 
Containers: se puede incluir un navbar en un container para centrarlo 
mejor. 

Placement: permite ubicar el navbar en diferentes posiciones de la página 
(top, bottom, sticky). 

Responsive behaviors: permite mostrar u ocultar elementos asociados a 
un botón cuando el tamaño de la pantalla cambia. 

Toggler: permite posicionar el botón a la derecha o a la izquierda. 
External content: permite ocultar información desplegando o colapsando 
información. 


En el siguiente ejercicio implementaremos algunos ejemplos de los que se muestran 
en la página de Bootstrap. 


T. 


En primer lugar, nos ubicamos en Ej100 angular y creamos el proyecto 
btNavbar tecleando ng new btNavbar. 


Seguidamente, renombraremos el proyecto para que haga referencia a 
nuestro nümero de ejercicio. Para ello, estando ubicados en el directorio 
Ej100 angular, escribiremos lo siguiente: 
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3. 











C:NEj100 angular»rename btNavbar 099 btNavbar 


Abrimos nuestro proyecto (por ejemplo, con Atom) y abrimos el archivo 
app.component.ts para modificar el título (title) y poner por ejemplo 
“099 Bootstrap btNavbar". 


Tal y como explicamos en el ejercicio anterior, 
instalaremos las librerías de forma local 
descargándolas e incorporándolas en el proyecto 

bajo la carpeta assets y también modificaremos 
el archivo angular-cli.json para hacer 


referencia a estas librerías. Por favor, revise el 
ejercicio 093 si tiene alguna duda. 


A continuación, en nuestro archivo app. 
component.html añadiremos un elemento 
div con la clase container alrededor de nuestro 
title para que quede así: 





«div class-"container-fluid"» 
<ħl>{ ftitilertt</BT> 


</div> 





En la página de Bootstra /Navbar localizamos el primer ejemplo asociado 
a Supported content y copiamos su contenido para pegarlo a continua- 
ción del cierre del tag </h1> que cierra nuestro title: 


<div class-"container-fluid"» 


<hl1>([(title))</n1> 





«nav class-"navbar navbar-toggleable-md navbar-light 
bg-faded”> 


<button class="navbar-toggler navbar-toggler-right” 
type-"button" data-toggle-"collapse" data-target="+- 


navbarSupportedContent” 


rn 


aria-controls-"navbarSupportedContent" aria-expan- 





ded-"false" aria-label-"Toggle navigation"» 


«span class="navbar-toggler-icon”></span> 


</button> 


«a class-"navbar-brand" href="*">Navbar</a> 
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«div class-"collapse navbar-collapse" id-"navbarSuppor- 


tedContent"» 





«ul class-"navbar-nav mr-auto"» 
«li class="nav-item active"» 


<a class-"nav-link" href="*">Home 


<span class="sr-only”>(current)</span> 


</a> 
</li> 
<li class="nav-item”> 
«a class-"nav-link" href=”#”>Link</a> 
Sli 
«li class="nav-item”> 


<a class-"nav-link disabled" href="*">Disa- 


bled«/a» 
</li> 
</ul> 
«form class-"form-inline my-2 my-lg-0"» 


«input class-"form-control mr-sm-2" type-"text" 


placeholder-"Search"» 


«button class-"btn btn-outline-success my-2 my- 


sm-0” type-"submit"»Search«/button» 
«/form» 
</div> 


</nav> 





Guardaremos el archivo y arrancaremos la aplicación ubicándonos en CA 
Ej100 angular N099 btNavbar y tecleando ng serve. Observe el resulta- 
do en el navegador accediendo a el URL http://localhost:4200/. 


BAN 
€ > Q 0 |O veni 


099 Bootstrap btNavbar 


Navbar Home ink 
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5. Ahora, reduzca el ancho de la página para comprobar cómo se ocultan las 
opciones y aparece un botón el cual, al pulsarlo, muestra las opciones 
verticalmente. 


o x 


Q ensis » WA JU tintar LAN ZA 


€-cn0 QD iocatbasz0Q arid. E i! € 9 C 0 0 aon ari Hneceo : 


- Otros marcadora - Deco merces 


099 Bootstrap btNavbar 099 Bootstrap btNavbar 


Navbar Navbar 
Home 


Link 





6. Acontinuación, localizaremos el apartado Color schemes y modificaremos 
el tag «nav» para que en lugar de la clase navbar-light ponga navbar- 
inverse bg-inverse y, tras guardar el archivo, comprobamos el resultado 
en el navegador. 


099 Bootstrap btNavbar 


Navbar 

Home 

Link 
Nabled 


Search 











7. Ahora, por probar otro tema, sustituiremos navbar-inverse bg-inverse 
por navbar-inverse bg-primary y veremos cómo queda. 


| / Q utet A 


€ > e 0 [Damas ade. ETE 


099 Bootstrap btNavbar 


Navbar 


tome 





8. Por último, localizaremos el apartado External content y copiaremos el 
ejemplo propuesto a continuación del bloque anterior insertando un <br> 
entre ambos bloques: 
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</div> 
<br> 
</nav> 
«div class-"pos-f-t"» 


«div class-"collapse" id-"navbarToggleExternalCon- 


tent" 
«div class-"bg-inverse p-4"» 
<h4 class-"text-white"»Collapsed content</h4> 


<span class-"text-muted"»Toggleable via the nav- 


bar brand.</span> 


</div> 
</div> 
«nav class-"navbar navbar-inverse bg-inverse”> 


«button class-"navbar-toggler" type-"button" da- 


ri 





ta-toggle-"collapse" data-target="fnavbarToggleExtern- 








alContent" aria-controls-"navbarToggleExternalContent" 





aria-expanded-"false" aria-label-"Toggle naviga- 
tion"» 
<span class="navbar-toggler-icon”></span> 
</button> 
</nav> 


</div> 





Guardamos el archivo y vemos cómo se muestra en el navegador. 


¡GET Aa 


€2G0 Owun at e BCOO; 


099 Bootstrap btNavbar 


Navbar 
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9. Ahora, comprobamos cómo al pulsar sobre el botón, se muestra el contenido 
u n 
oculto”. 


10. Para comprobar cómo se adaptan los elementos a la pantalla cuando esta cambia 
de tamaño, reduzca al máximo y despliegue todos los bloques para ver cómo se 
muestra. 


€ eo O localhost? A v ë. 
Qt ë e 


099 Bootstrap btNavbar | 099 Bootstrap 


btNavbar 


Collapsed content 


loggleable via the nevia brand. 





Collapsed content 


Togaleable via the navbar brand 
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Bootstrap: Progress 


El componente Progress permite mostrar el avance Importante 
de un proceso visualizando una barra de progreso. Para 


añadir un valor a la barra, añadimos dicho valor al div 
al que le hemos asociado la clase progress-bar. Po- 
demos variar el alto de la barra con la propiedad hei- 
ght mediante “style” (p. ej., style=” height: 1px;”). 
Podemos definir el background mediante las clases 
bg-success, bg-info, y mostrar varias barras simultá- 





neamente solapadas entre sí y aplicando una anima- 
ción mediante la clase progress-bar-animated. Vea- 


mos algún ejemplo de la página de Bootstrap (https://v4-alpha.getbootstrap.com/ 
components/progress/). 


1. 


Nos ubicamos en Ej100_angular, y creamos el proyecto btProgress tecleando 
ng new btProgress. 


Ahora, renombraremos el proyecto desde el directorio Ej100 angular, 
escribiendo lo siguiente: 





C:NEj100 angular»rename btProgress 100 btProgress 


Abrimos el proyecto y en app.component.ts modificamos title con “100 
Bootstrap Progress”. 


Instalaremos las librerías localmente. Por favor, revise el ejercicio 093. 


En app.component.html añadimos un div con la clase container 
alrededor de nuestro title así: 


«div class-"container"»«hl»[[title)]«/h1»«/div» 


Localizamos el primer ejemplo de Progress, y copiamos el bloque que 
muestra el 25% para pegarlo en app.component.html detrás de </h1> 
para que el archivo quede de la siguiente manera: 
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<div class="container”“><h1>((title))</h1> 


<div class="progress”> 


<div class-"progress-bar" role-"progressbar" style="wi- 
dth: 25%” aria-valuenow-"25" aria-valuemin-"0" aria-value- 


max="100%></div> 
</div> 


</div> 





Guardamos el archivo y arrancamos la aplicación desde C:NEj100 angu- 
lar*100_btProgress tecleando ng serve. Observe el resultado en el nave- 


gador en el URL http://localhost:4200/. 


/ 9 woes 2X 


€ > C A(O hoto AR ELA 


» | Otros msredores 


100 Bootstrap Progress 





5. A continuación, modificamos app.component.ts para que la clase 
AppComponent quede así: 


export class AppComponent { 
title = '100 Bootstrap Progress'; 


lorN: number = 20; 





valorT: string = "20$"; 


onChange ($event) { 


this.valorN = parseInt ($event.target.value); 





this.valorT = this.valorN + “37; 





El evento para el input lo añadiremos a nuestra página así: 
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<div class-"container-fluid"» 


<h1>([(title))</h1> 


<div class="progress m-2"» 


<div class="progress-bar” role="progressbar” [ngs- 
tyle]-2-"('width': valorT)" aria-valuenow-"25" aria-value- 


min-"0" aria-valuemax-"100"»«/div» 
«/div» 
<br><input (change)-"onChange (Sevent)"» 


«/div» 





Hemos añadido un [ngStyle] para que el ancho (width) sea variable según 
el valor que se introduzca en el input y un evento “onChange()” para po- 
der redibujar la barra de progreso. 


6. Guardamos el archivo y probamos en el navegador con los valores 30 y 80. 


/n BtProgress * VÀ /a Drogas x WA 
esca € | Q lacalhort:4200 & * y» "neo :!: €2010 lo localhost:4200 t4 «negocii 














»| Otros marcadores Otros marcadores 


100 Bootstrap Progress 100 Bootstrap Progress 
(AA A) 











7. Añadimos el contenido de la variable valor modificando el div que 
contiene la clase progress-bar: 


«div class-"progress-bar" role="progressbar” [ngStylel="(1'wid- 


th’: valorT]" aria-valuenow-"25" aria-valuemin-"0" 


aria-valuemax="100“>f4f valorT ))</div> 





Guardamos el archivo y vemos cómo queda en el navegador con el valor 50. 


$ EY BtProgrose x a 
€5ct0 ¡0 localhost4200 - a x| -»BnBne-€0 


» | Otros marcadores 





100 Bootstrap Progress 
OA] 





90 
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8. Ahora añadiremos un par de botones para modificar el tamaño de la barra 
de progreso. Escogemos dos imágenes para flecha arriba y abajo para 
aumentar y disminuir, respectivamente, dicho tamaño. 


9. Creamos la carpeta src/images y en la misma ponemos las imágenes (p. 
ej., arriba.svg y abajo.svg). 


v El 100 btProgress 


eo 
> MM e2e 


> E app 
v BH assets 
> Wi bootstrap4 
v E images 
&à abajo.svg 
Ea arnba.svg 
> lg ¡query 





10. Seguidamente, incluimos las imágenes con el siguiente codigo detrás del tag 
input anterior: 


«div class="container m-2"» 


<button class-"btn btn-primary btn-sm” type-"button" 
name= "button" (click)-"onClick( '*')" (keyup.down)-"on- 
e e. ad 

«img src-"assets/images/arriba.svg" alt-"" width-"30" 


height=” 30"»«/button» 


<button class-"btn btn-primary btn-sm" type-"button" na- 


me-"button" (click)-"onClick('-")"» 


«img src-"assets/images/abajo.svg" alt-"" width-"30" 


height=” 30"»«/button» 


«/div» 





Modificaremos la clase AppComponent en app.component.ts para que 
quede así: 
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export class AppComponent { 
title = '100 Bootstrap Progress'; 
valor: string = "20"; 
valorN: number 205 
valorT: string E ue 
incr: number = 1; 


onChange ($event) ( 


this.valorN = parseInt($event.target.value); 





this.valorT = this.valorN + "$^"; 
) 
onClick(action: string) { 


console.log("action " + action); 


if (action == “+”) ( this.incr = 1; ) else { this.incr 


15) 
this.valorN = parseInt(this.valor) + this.incr; 


if (this.valorN < 0) this.valorN = 0; 





if (this.valorN > 100) this.valorN = 100; 
this.valor = this.valorN.toString(); 


this.valorT = this.valorN + "$£"; 





Probamos las flechas y vemos como la barra aumenta o disminuye según 


pulsemos un botón u otro. 


€ > Q 0 0 locahort4200 arif . Heco : 


» Qtros marcadores 


100 Bootstrap Progress 
CA I 





E 








11. Ahora, añadimos la clase progress-bar-striped al div que posee la clase 


progress-bar así: 
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<div class-"progress-bar progress-bar-striped" role-"pro- 


gressbar" [ngStyle]-"('width': valorT)” aria-valuenow-"25" 


aria-valuemin-"0" 


aria-valuemax-"100"» 





Guarde el archivo y observe cóomo queda. 


AO iege * NUR 


A 
€ > © f O tocainostsz00 
Otros marcadores 


100 Bootstrap Progress 
AAA] 


BS — —] 
ay 








12. Por último, añadimos la clase progress-bar-animated y vemos cómo 
queda. 





€ > Q Ó O tocamno:t:4200 an| HECO: 
» Quos marcadores 


100 Bootstrap Progress 
NANA AAA] 





[sol 








Descargado en: eybooks.com 
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